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的点击事件

 

案例三：