2. 程式人生 > >事件冒泡和捕獲 觸發

事件冒泡和捕獲 觸發

阿新 • • 發佈：2019-02-03

什麼是事件？

 　　事件是文件和瀏覽器視窗中發生的特定的互動瞬間。 事件是javascript應用跳動的心臟，也是把所有東西黏在一起的膠水，當我們與瀏覽器中web頁面進行某些型別的互動時，事件就發生了。

 事件可能是使用者在某些內容上的點選，滑鼠經過某個特定元素或按下鍵盤上的某些按鍵，事件還可能是web瀏覽器中發生的事情，比如說某個web頁面載入完成，或者是使用者滾動視窗或改變視窗大小。

什麼是事件流：

   事件流描述的是從頁面中接受事件的順序，但有意思的是，微軟（IE）和網景（Netscape）開發團隊居然提出了兩個截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕獲流(event capturing)。

 第一種：事件冒泡

    　　　IE提出的事件流叫做事件冒泡，即事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點，看一下以下示例：

複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="bodyClick()">

    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">點選冒泡</p>
        </button>
    </div>
    <script>
       
       function p(){
          console.log('p標籤被點選')
       }
        function btn(){
            console.log("button被點選")
        }
         function divClick(event){
             console.log('div被點選');
         }
        function bodyClick(){
            console.log('body被點選')
        }

    </script>

</body>
</html>

複製程式碼

接下來我們點選一下頁面上的p元素，看看會發生什麼：

   正如上面我們所說的，它會從一個最具體的的元素接收，然後逐級向上傳播， p=>button=>div=>body..........事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。

 第二種：事件捕獲

         網景公司提出的事件流叫事件捕獲流。

          事件捕獲流的思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最後接收到事件，針對上面同樣的例子，點選按鈕，那麼此時click事件會按照這樣傳播：（下面我們就借用addEventListener的第三個引數來模擬事件捕獲流）

複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <button>
        <p>點選捕獲</p>
    </button>
</div>
<script>
    var oP=document.querySelector('p');
    var oB=document.querySelector('button');
    var oD=document.querySelector('div');
    var oBody=document.querySelector('body');

    oP.addEventListener('click',function(){
        console.log('p標籤被點選')
    },true);

    oB.addEventListener('click',function(){
        console.log("button被點選")
    },true);

    oD.addEventListener('click',  function(){
        console.log('div被點選')
    },true);

    oBody.addEventListener('click',function(){
        console.log('body被點選')
    },true);

</script>



</body>
</html>

複製程式碼

同樣我們看一下後臺的列印結果：

正如我們看到的，和冒泡流萬全相反，從最不具體的元素接收到最具體的元素接收事件  body=>div=>button=>p 

DOM事件流：

   　　 ‘DOM2級事件’規定的事件流包含3個階段，事件捕獲階段、處於目標階段、事件冒泡階段。首先發生的事件捕獲為截獲事件提供機會，然後是實際的目標接收事件，最後一個階段是事件冒泡階段，可以在這個階段對事件做出響應。

　　　在DOM事件流中，事件的目標在捕獲階段不會接收到事件，這意味著在捕獲階段事件從document到<p>就停止了，下個階段是處於目標階段，於是事件在<p>上發生，並在事件處理中被看成冒泡階段的一部分，然後，冒泡階段發生，事件又傳播回document。

下面是我們模擬它的示例：

複製程式碼

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button id="btn">DOM事件流</button>

<script>

var btn=document.getElementById("btn");

btn.onclick=function(event){

console.log("div 處於目標階段");

};

document.body.addEventListener("click",function(event){

console.log("event bubble 事件冒泡");

},false);

document.body.addEventListener("click",function(event){

console.log("event catch 事件捕獲");

},true);

</script>

</body>

</html>

複製程式碼

看看後臺給出什麼結果：

就是這樣一個流程，先捕獲，然後處理，然後再冒泡出去。

 關於DOM 2級事件處理程式：

   　　DOM 2級事件定義了兩方法：用於處理新增事件和刪除事件的操作： 新增事件 addEventListener()     刪除事件  removeEventListener()

　　 所有DOM節點中都包含這兩個方法，並且他們都包含3個引數： （1） 要處理的事件方式（例如：click，mouseover,dbclick.....） （2）事件處理的函式，可以為匿名函式，也可以為命名函式（但如果需要刪除事件，必須是命名函式） （3）一個布林值，代表是處於事件冒泡階段處理還是事件捕獲階段（true：表示在捕獲階段呼叫事件處理程式；false:表示在冒泡階段呼叫事件處理程式）

　　使用DOM 2級事件處理程式的主要好處是可以新增多個事件處理程式，事件處理會按照他們的順序觸發，通過addEventListener新增的事件只能用removeEventListener來移除，移除時傳入的引數與新增時使用的引數必須相同，這也意味著新增的匿名函式將無法移除，（注意：我們預設的第三個引數都是預設false,是指在冒泡階段新增，大多數情況下，都是將事件處理程式新增到事件的冒泡階段，這樣可以最大限度的相容各個瀏覽器）

複製程式碼

//這是一個DOM 2級事件 新增事件最簡單的方式（此時新增的是一個匿名函式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按鈕</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            console.log('我是按鈕')
        },false)   //當第三個引數不寫時，也是預設為false（冒泡時新增事件）
    </script>

</body>
</html>

複製程式碼

那麼我們試試命名函式：

複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按鈕</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',foo,false);
        function foo(){
            console.log('我是按鈕')
        }
           //其實操作就是把寫在裡面的函式拿到了外面，而在原來的位置用函式名來代替
    </script>
</body>
</html>

複製程式碼

那麼我們新增兩個事件試試：

複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按鈕</button>
    <script>
        var btn=document.querySelector('button');
         //第一個事件
        btn.addEventListener('click',foo,false);
        function foo(){
            console.log('我是按鈕')
        }
        //第二個事件
        btn.addEventListener('click',newFoo,false);
        function newFoo(){
            console.log('我是新按鈕')
        }
    </script>
</body>
</html>

複製程式碼

那麼我們看看後臺有沒有執行，執行順序是怎樣的:

所以說，我們新增兩個事件是可以的，事件的順序就是按照我們程式寫的順序執行的

那我們試試DOM 0級事件處理程式

複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="foo()"  onclick="newFoo()">按鈕</button>
    <script>
        function foo(){
            console.log(2)
        }
        function newFoo(){
            console.log(9)
        }
    </script>
</body>
</html>

複製程式碼

看一下結果：

只執行了第一個事件，第二個被忽略，這並不是我們想要的結果，而addEventLiener是會把兩個事件都去執行的。

結尾：

   以上就是事件冒泡，事件捕獲，dom事件流，dom2級事件流的所有內容，謝謝閱讀！

相關推薦

事件冒泡和捕獲 觸發

什麼是事件？  　　事件是文件和瀏覽器視窗中發生的特定的互動瞬間。 事件是javascript應用跳動的心臟，也是把所有東西黏在一起的膠水，當我們與瀏覽器中web頁面進行某些型別的互動時，事件就發生了。  事件可能是使用者在某些內容上的點選，滑鼠經過某個特定元素或按下鍵盤

事件流（事件冒泡和捕獲，函式閉包等）

事件流 事件流描述的是從頁面中接受事件的順序，當幾個都具有事件的元素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事件。 事件流包括兩種模式：冒泡和捕獲 事件捕獲： 父級元素先觸發，子集元素後觸發；（由外到

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

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

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() 寫法 事件冒泡有空補充（印象筆記裏） 事件捕獲 瀏覽器默認，由裏向外逐漸觸發事件，這種行為叫做事件冒泡。 利用事件監聽可以使瀏覽器，由外向裏逐漸觸發事件，這種行為叫做事件捕獲。

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

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

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

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

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

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

事件冒泡、捕獲和事件委託

事件冒泡與捕獲 事件冒泡：事件從觸發事件的節點開始一直向上傳播直至父節點。 事件捕獲：事件從父級節點開始一直傳遞到觸發事件的節點。 當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，即div先觸發，p後觸發。 當你使用事件冒泡時，子級元素先觸發，父級元素後觸發，

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

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

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

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

冒泡和捕獲的觸發與阻止的例子

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><style>div {   

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

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

js事件流機制冒泡和捕獲

JavaScript與HTML之間的互動是通過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。 事件流 從頁面中接收事件的順序稱為事件流。 IE --> 事件冒泡流 Netscape --> 事件捕獲流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling)，即事件

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

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

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

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

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

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