聊聊事件冒泡與事件捕獲

時間 2019-12-13

原文原文鏈接

什麼是事件？javascript

　　事件是文檔和瀏覽器窗口中發生的特定的交互瞬間。html

什麼是事件流：java

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

讓咱們先聊聊DOM0級事件與DOM2級事件瀏覽器

DOM0

直接經過 onclick寫在html裏面的事件, 好比:函數

在標籤內寫onclick事件this

<input onclick="alert(1)" />

在JS寫onlicke=function（）{}函數spa

1 document.getElementById("myButton").onclick = function () {
2     alert('thanks');
3 }

DOM2

主流瀏覽器DOM2級事件是經過如下兩個方法用於處理指定和刪除事件處理程序的操做：代理

添加事件 addEvenetListener ------ 能夠爲元素添加多個事件處理程序，觸發時會按照添加順序依次調用。
刪除事件 removeEventListener ------- 不能移除匿名添加的函數。

它們都有三個參數：code

第一個參數是事件名（如click)。
第二個參數是事件處理程序函數。 能夠爲匿名函數，也能夠爲命名函數（但若是須要刪除事件，必須是命名函數）
第三個參數若是是true則表示在捕獲階段調用，爲false表示在冒泡階段調用。

使用DOM 2級事件處理程序的主要好處是能夠添加多個事件處理程序，事件處理會按照他們的順序觸發，經過addEventListener添加的事件只能用removeEventListener來移除，移除時傳入的參數與添加時使用的參數必須相同，這也意味着添加的匿名函數將沒法移除，（注意：咱們默認的第三個參數都是默認false,是指在冒泡階段添加，大多數狀況下，都是將事件處理程序添加到事件的冒泡階段，這樣能夠最大限度的兼容各個瀏覽器）

匿名函數

1 //這是一個DOM 2級事件 添加事件最簡單的方式（此時添加的是一個匿名函數）
2     <button>按鈕</button>
3     <script>
4         var btn=document.querySelector('button');
5         btn.addEventListener('click',function(){
6             console.log('我是按鈕')
7         },false)   //當第三個參數不寫時，也是默認爲false（冒泡時添加事件）
8     </script>

命名函數

1     <button>按鈕</button>
2     <script>
3         var btn=document.querySelector('button');
4         btn.addEventListener('click',foo,false);
5         function foo(){
6             console.log('我是按鈕')
7         }
8            //其實操做就是把寫在裏面的函數拿到了外面，而在原來的位置用函數名來代替
9     </script>

看完以上的，咱們再瞭解事件冒泡與捕獲

第一種（事件冒泡）IE提出

IE提出的事件流叫作事件冒泡，即事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body onclick="bodyClick()">
 8 
 9     <div onclick="divClick()">
10         <button onclick="btn()">
11             <p onclick="p()">點擊冒泡</p>
12         </button>
13     </div>
14     <script>
15        
16        function p(){
17           console.log('p標籤被點擊')
18        }
19         function btn(){
20             console.log("button被點擊")
21         }
22          function divClick(event){
23              console.log('div被點擊');
24          }
25         function bodyClick(){
26             console.log('body被點擊')
27         }
28 
29     </script>
30 
31 </body>
32 </html>

接下來咱們點擊一下頁面上的p元素，以下所示

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

第二種（事件捕獲）網景提出

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div>
10     <button>
11         <p>點擊捕獲</p>
12     </button>
13 </div>
14 <script>
15     var oP=document.querySelector('p');
16     var oB=document.querySelector('button');
17     var oD=document.querySelector('div');
18     var oBody=document.querySelector('body');
19 
20     oP.addEventListener('click',function(){
21         console.log('p標籤被點擊')
22     },true);
23 
24     oB.addEventListener('click',function(){
25         console.log("button被點擊")
26     },true);
27 
28     oD.addEventListener('click',  function(){
29         console.log('div被點擊')
30     },true);
31 
32     oBody.addEventListener('click',function(){
33         console.log('body被點擊')
34     },true);
35 
36 </script>
37 </body>
38 </html>

一樣咱們看一下後臺的打印結果

和冒泡流徹底相反，從最不具體的元素接收到最具體的元素接收事件 body=>div=>button=>p

事件代理

在實際的開發當中，利用事件流的特性，咱們可使用一種叫作事件代理的方法。

<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
</ul>

若是點擊頁面中的li元素，而後輸出li當中的顏色，咱們一般會這樣寫:

1 var list_li = document.getElementsByTagName('li');
2 for (var i = 0; i < list_li.length; i++) {
3     list_li[i].addEventListener('click',foo,false);
4 }
5 function foo (e) {
6    let x = e.target;
7    console.log(x.innerHTML)
8 }

利用事件流的特性，咱們只綁定一個事件處理函數也能夠完成：

1 var list_ul = document.getElementById('color-list');
2 list_ul.addEventListener('click', foo, false);
3 function foo (e) {
4     let x = e.target;
5     if (x.nodeName == 'LI') {
6     　　console.log(x.innerHTML)
7     }
8 }

冒泡仍是捕獲？

對於事件代理來講，在事件捕獲或者事件冒泡階段處理並無明顯的優劣之分，可是因爲事件冒泡的事件流模型被全部主流的瀏覽器兼容，從兼容性角度來講仍是建議你們使用事件冒泡模型。

　　IE瀏覽器兼容

　　　IE瀏覽器對addEventListener兼容性並不算太好，只有IE9以上可使用。

　　　要兼容舊版本的IE瀏覽器，可使用IE的attachEvent函數

object.attachEvent(event, function)

　　　兩個參數與addEventListener類似，分別是事件和處理函數，默認是事件冒泡階段調用處理函數。而且因爲IE瀏覽器只支持事件冒泡，因此添加的程序都被添加到冒泡階段。要注意的是，寫事件名時候要加上"on"前綴（"onload"、"onclick"等）。

　區別

　　addEventListener與attachEvent除了參數個數以及第一個參數意義不一樣外。還有以下兩點：

事件處理程序的做用域不相同：addEventListener的做用域是元素自己，this指的是觸發元素。而attachEvent事件處理程序會在全局變量內運行，this指的是window，因此剛纔的例子返回的結果是undefined，而不是元素id。
爲一個事件添加多個事件處理程序時，執行順序不一樣：使用addEventListener時瀏覽器會按照添加順序執行，IE瀏覽器使用attachEvent時，若是添加的方法過多時，IE瀏覽器將不會按照順序執行。

阻止事件冒泡與阻止默認事件

　　阻止事件冒泡 stopPropagation() 方法

　　能夠阻止事件冒泡，也能夠阻止事件捕獲，也能夠阻止處於目標階段

　　使用stopPaopagation()方法能夠中止事件在DOM層次的傳播，再也不派發事件。

 1 <div id="p">parent
 2       <div id="c">child</div>
 3 </div>
 4 <script type="text/javascript">
 5 var p = document.getElementById('p'),
 6       c = document.getElementById('c');
 7       c.addEventListener('click', function (e) {
 8       e.stopPropagation()
 9            alert('子節點冒泡')   //再也不向上冒泡到父級
10 }, false);
11 p.addEventListener('click', function () {
12          alert('父節點冒泡')}, false);
13 </script>