Js事件機制執行的順序

1、事件經歷三個階段：

事件捕獲、事件觸發、事件冒泡

2、觸發事件方法如：

element.addEventListener(eventName, handler, useCapture);

eventName: 事件名稱

handler:回調函數

useCapture:執行時機   true:在捕獲階段執行， false:在冒泡階段執行，false為默認值

3、具體含義：

事件捕獲：由外到內

事件觸發：那個元素真正觸發了事件

事件冒泡：由內到外

如果 ul 和 li 都綁定了click事件，當對  li   元素進行點擊事件時，事件捕獲則是先調用ul的click事件，之后再調用li的click事件，冒泡階段則是先調用li的click事件，之后再調用ul的click事件

4、阻止冒泡

event.stopPropagation();阻止事件冒泡
IE瀏覽器：window.event.cancelBubble = true

5、阻止捕獲

 

6、具體案例：

案例一：

 <ul id="app">
    <li id="child">大家好，我是1號</li>
    <li>大家好，我是2號</li>
    <li>大家好，我是3號</li>
    <li>大家好，我是4號</li>
    <li>大家好，我是5號</li>
  </ul>
  <script>
    var app = document.getElementById('app');
    app.addEventListener('click', function (event) {
      console.log(1, event.target, event);
    });
    var li = document.getElementById('child');
    li.addEventListener('click', function (event) {
      console.log(2, event.target, event);
    });

  </script>

結果是：

2 <li id=​"child">​…​</li>​ PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
1 <li id=​"child">​…​</li>​ PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

執行的順序是冒泡順序
如果將li的click事件的第三個參數設置為true，得到的結果也是如上結果，因為對於ul來說觸發階段在冒泡階段，則是先執行li的點擊事件，而li的觸發階段是在捕獲階段，因此先執行li的點擊事件

案例二：

<ul id="app">
    <li id="child">大家好，我是1號</li>
    <li>大家好，我是2號</li>
    <li>大家好，我是3號</li>
    <li>大家好，我是4號</li>
    <li>大家好，我是5號</li>
  </ul>
  <script>
    var app = document.getElementById('app');
    app.addEventListener('click', function (event) {
      console.log(1, event.target, event);
    }， true);
    var li = document.getElementById('child');
    li.addEventListener('click', function (event) {
      console.log(2, event.target, event);
    }, true);

  </script>

結果是：

1 <li id=​"child">​…​</li>​ PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
2 <li id=​"child">​…​</li>​ PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

執行的順序是捕獲順序
如果將ul的click事件的第三個參數設置為true，li的第三個參數為false, 得到的結果也是如上結果，因為對於ul來說觸發階段在捕獲階段，則是先執行ul的點擊事件，而ul的觸發階段是在捕獲階段，因此先執行ul的點擊事件

 

案例三：