2. 程式人生 > >事件流：事件冒泡和事件捕獲的理解

事件流：事件冒泡和事件捕獲的理解

阿新 • • 發佈：2019-01-18

事件流：事件冒泡和事件捕獲

1. 兩者概念

  • 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。，

    element.addEventListener(event,function(),false);

  • 事件冒泡是自下而上的去觸發事件。繫結事件方法的第三個引數，就是控制事件觸發順序是否為事件捕獲。

    element.addEventListener(event,function(),true);

  • 從上面可知，第三個引數為true或者false;

    • true,事件捕獲；
    • false,事件冒泡。(預設)

  • jQuery的e.stopPropagation會阻止冒泡

2. 案例分析

這是HTML結構：一個父級容器中套著一個子集容器

<div class="parent">
    <div class="child"></div>
</div>

接下來給它們繫結上事件：

document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    })
    document.querySelector(".child").addEventListener
 
("click",function(e){
        alert("child事件被觸發，"+this.className)
    })

效果展示

結果：

child事件被觸發，child
parent事件被觸發，parent

結論：先child，然後parent。事件的觸發順序自內向外，這就是事件冒泡。

擴充套件：

  • querySelector() 方法返回文件中匹配指定 CSS 選擇器的一個元素;
    只會返回第一個符合要求的。比如兩個class="parent";
    document.querySelector('.parent')只會查詢第一個符合要求的。
  • querySelectorAll()
    方法返回文件中匹配指定 CSS 選擇器的所有元素；
    document.querySelectorAll('.parent')[0] 獲取的是第一個符合class = "parent"的元素節點。
    document.querySelectorAll('.parent')[1] 獲取的是第二個符合class = "parent"的元素節點。

現在改變第三個引數的值為true

   document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    },true)
    document.querySelector(".child").addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    },true)

效果展示

結果：

parent事件被觸發，parent
child事件被觸發，child

結論：先parent,然後child。事件觸發順序變更為自外向內，這就是事件捕獲。

3. 應用案例

      <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

需求：滑鼠放到li上對應的li背景變灰。

  1. 利用事件冒泡實現：（知識應用）
$("ul").on("mouseover",function(e){
    $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })
  1. 給所有li都綁上事件 （初始想法）
　　$("li").on("mouseover",function(){
                $(this).css("background-color","#ddd").siblings().css("background-color","white");
            })

這樣也行。而且從程式碼簡潔程度上，兩者相差無幾。

但是，如果我們在繫結事件完成後，又給ul新增子元素li:

$("ul").append("<li>item</li>");

此時，第二種方案，由於繫結事件的時候li還不存在，所以當新新增li時候，效果不起作用（新的li未繫結事件）。所以為了效果，我們還要給它再繫結一次事件。這時候使用事件冒泡方法實現就突出優勢！！！

4. 完整程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和事件捕獲</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .parent{
            border: 1px solid red ;
            height: 200px;
            width: 200px;

        }
        .child{
            background-color: #e7ff69;
            height: 100px;
            width: 100px;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
</head>

<body>
<hr>
<h3>1.事件冒泡：從內向外;第三個引數為false(預設值)</h3>
<hr>
<div class="parent">
    <div class="child"></div>
</div>


<hr>
<h3>2.事件捕獲：從外向內：第三個引數為true</h3>
<hr>
<div class="parent">
    <div class="child"></div>
</div>


<br>
<br>
<hr>
<h3>3.應用案例</h3>
<hr>
<input type="button" value="新增一個li" id="btn">
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
<script>
    document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    })
    document.querySelector(".child").addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    })


    document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    },true)
    document.querySelectorAll(".child")[1].addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    },true)

    $("#btn").click(function () {
        $("ul").append("<li>item</li>");
    });

    /*//僅僅對li簡單的繫結事件會使得添加了新的li時候，得重新給他繫結上事件，否則不起作用。下面方法不好
    $("li").on("mouseover",function(){
        $(this).css("background-color","#ddd").siblings().css("background-color","white");
    })*/
    //利用事件冒泡實現
    $("ul").on("mouseover",function(e){
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
    })

</script>


</body>
</html>

相關推薦

事件流：事件冒泡和事件捕獲

top 選擇器 itl listener doc 三個參數 NPU 默認 捕獲 事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,fu

事件流：事件冒泡和事件捕獲的理解

事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,function(),false); 事件冒泡是自下而上的去觸發

關於事件流，事件冒泡和事件捕獲

有意 clas 向上 接收 上傳 單擊事件 sca dom 描述 1.事件流 假設有這樣一個場景： 有一個導航條：div > ul > li > a，每個元素塊寬高一樣，就像是一組同心圓。如果我們點擊a元素，那麽瀏覽器會認為單擊事件不僅僅發生在a上。換

JS高階：事件冒泡和事件捕獲；

1、事件：瀏覽器客戶端上客戶觸發的行為成為時事件；所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發 當用戶觸發一個事件時，瀏覽器的所有詳細資訊都存在一個叫做event的物件上，我們把它叫做事件物件 2、獲取滑鼠的座標 event.clientX;event.clientY document

【事件流】事件冒泡和事件捕獲

事件流： 　　通俗的說就是：元素觸發時，傳播的過程。   冒泡型事件流：事件的傳播是從最具體的事件目標到最不具體的事件目標。即從DOM樹的葉子到根。 　　　　　　　<div>—》<body>—》<html>—》document &n

JavaScript——事件流（事件冒泡和事件捕獲）

1、事件流 當瀏覽器發展到第4代時，瀏覽器開發團隊遇到了一個問題：頁面中的哪個元素會擁有某個特定的事件？當你單擊某個按鈕時，顯然該單擊事件並不僅僅發生在按鈕上，它還發生在按鈕的所有祖先元素上，比如按鈕的容器元素，容器元素的父元素，甚至整個頁面document。但是，哪個元素

JS事件流（事件冒泡和事件捕獲）

事件流是描述從頁面接收事件的順序。但是有意思的是，IE和Netscape開發團隊提出了差不多完全相反的事件流概念。IE的事件流是事件冒泡流，而Netspace Communicator的事件流是事件捕獲流。 事件冒泡 IE的事件流叫做事件冒泡（event

js 事件流的事件冒泡和事件捕獲與阻止事件傳播

head 阻止事件冒泡 觸發 事件冒泡 單擊 期望 就會 簡單的 出現異常 為了方便引入事件流的概念，我們先來說說什麽是事件。 事件就是用戶或瀏覽器自身執行的某種動作。換句話說，我們在瀏覽網頁或者 APP 時，通常會在設備上產生很多交互性的操作，例如點擊、選擇、滾動屏幕、鍵

js的事件冒泡和事件捕獲

use 應用 ges color mouse 冒泡 code 元素事件 三個參數 一、定義 事件捕獲：從document到觸發事件的那個節點，自上而下觸發事件； 事件冒泡：從觸發事件節點依次向上觸發事件，直到document。 原聲js中，綁定事件方法addEventLis

js之事件冒泡和事件捕獲詳細介紹

1-1 ppr lang strong 傳播 默認 ont 也不會 element （1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document

JS事件冒泡和事件捕獲

border 綁定 tab 現在 cells 一次 tel 加載 adding 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發

DOM事件機制(事件捕獲和事件冒泡和事件委托)

使用 tar web strong 事件 所有 span click ner 內容： 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件 事件是用來處理響應的一個機制，這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏

事件冒泡和事件捕獲

pad http eve class click true blue on() 寫法 事件冒泡有空補充（印象筆記裏） 事件捕獲 瀏覽器默認，由裏向外逐漸觸發事件，這種行為叫做事件冒泡。 利用事件監聽可以使瀏覽器，由外向裏逐漸觸發事件，這種行為叫做事件捕獲。

JS之捕獲冒泡和事件委託

一、事件流（捕獲，冒泡）   事件流：指從頁面中接收事件的順序，有冒泡流和捕獲流。 當頁面中發生某種事件（比如滑鼠點選，滑鼠滑過等）時，毫無疑問子元素和父元素都會接收到該事件，可具體順序是怎樣的呢？冒泡和捕獲則描述了兩種不同的順序。   DOM2

事件，事件冒泡和事件捕獲

1.事件 瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發。 通過obj.事件名=function(){} 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick&n

JS中的事件冒泡和事件捕獲

談起JavaScript的 事件，事件冒泡、事件捕獲、阻止預設事件這三個話題，無論是面試還是在平時的工作中，都很難避免。 事件捕獲階段：事件從最上一級標籤開始往下查詢，直到捕獲到事件目標(target

徹底弄懂JS的事件冒泡和事件捕獲

事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。 假設一個元素div，它有一個下級元素p。 <div> 　　<p>元素</p> </div> 這兩個元素都綁定了click事件，如果使用者點

終於弄懂了事件冒泡和事件捕獲！

總結了兩個人的部落格，寫了這篇：總算是搞清楚事件捕獲和事件冒泡了！ 參考資料淺談事件冒泡與事件捕獲 理解事件捕獲和事件冒泡 1、事件捕獲 捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確(也可以在視窗級別

JS 事件冒泡和事件捕獲

寫在前面 W3C規定DOM事件流（event flow ）存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。dom標準事件流的觸發的先後順序為：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後通過事件傳播進行事件冒泡。 對事件冒泡和捕捉的解釋 事件冒泡 在本示例中，當我們點選孫

YII框架分析筆記2：組件和事件行為管理

reac 設置 有變 相關 article class ces col cal Yii是一個基於組件、用於開發大型 Web 應用的高性能 PHP 框架。CComponent幾乎是所有類的基類，它控制著組件與事件的管理，其方法與屬性如下，私有變量$_e數據存放事件(evnet