w3c事件模型中的事件：首先是捕获阶段，达到目标阶段，再进入冒泡阶段。
attachEvent()采用冒泡方式，而addEventListener()可以采用冒泡或事件捕获方式

  1. document.body.addEventListener('click', ()=>{}, true)

image.png

事件冒泡

事件开始的节点元素接收，然后传播至上级

举个栗子：
层级关系： document > html > body > div > span > button

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.    <div onclick="divClick()">
  6.       <span onclick="spanClick()">
  7.          <button onclick="butClick()">点击</button>
  8.       </span>
  9.    </div>
  10. </body>
  11. <script>
  12.    function butClick() {
  13.       console.log('button');
  14.    }
  16.    function spanClick() {
  17.       console.log('span');
  18.    }
  20.    function divClick() {
  21.       console.log('div');
  22.    }
  24.    document.body.onclick = () => {
  25.       console.log('body');
  26.    }
  27. </script>
  29. </html>

输出结果：
输出顺序： button > span > div > body > html > document
image.png
图片示例：
image.png

事件捕获

上一节点接收事件，然后向下传播到具体节点元素

举个栗子:
层级关系： document > html > body > div > span > button

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.    <div id="div">
  6.       <span id="span">
  7.          <button id="button">
  8.             点击
  9.          </button>
  10.       </span>
  11.    </div>
  12. </body>
  13. <script>
  14.    const body = document.body;
  15.    const div = document.querySelector('div');
  16.    const span = document.querySelector('span');
  17.    const button = document.querySelector('button');
  19.    div.addEventListener('click', (event) => {
  20.       console.log('div');
  21.    }, true);  // false 为冒泡事件、true为捕获事件
  23.    span.addEventListener('click', (event) => {
  24.       console.log('span');
  25.    }, true);
  27.    button.addEventListener('click', (event) => {
  28.       console.log('button');
  29.    }, true);
  31.    body.addEventListener('click', (event) => {
  32.       console.log('body');
  33.    }, true);
  35. </script>
  37. </html>

输出结果：
输出顺序: body > div > span > button
image.png
图片示例：
image.png

DOM事件流

事件先是从 捕获事件开始，再到目标事件，最后冒泡事件。

举个栗子：

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.    <div id="div">
  6.       <button onclick="buttonClick()">
  7.          点击
  8.       </button>
  9.    </div>
  10. </body>
  11. <script>
  12.    const body = document.body;
  13.    const div = document.querySelector('div');
  14.    const button = document.querySelector('button');
  16.    const buttonClick = (event) => {
  17.       console.log('button');
  18.    };   // 目标事件
  20.    div.addEventListener('click', (event) => {
  21.       console.log('div');
  22.    }, false);  // 冒泡事件
  24.    body.addEventListener('click', (event) => {
  25.       console.log('body');
  26.    }, true);   // 捕获事件
  28. </script>
  30. </html>

输出结果：
输出顺序：捕获事件 > 目标事件 > 冒泡事件
image.png

图片示例：
image.png

阻止事件冒泡

w3c模型：调用事件的event.stopPropagation()方法
微软的模型: 设置事件的cancelBubble的属性为true

  1. document.body.addEventListener('click', (event) => {
  2.      if(event){
  3.       event.stopPropagation();
  4.      }else{
  5.          window.event.cancelBubble = true;
  6.      }
  7.    }, false);
  9. // React框架阻止冒泡的方法
  10. const click = (event)=>{
  11.     event.nativeEvent.stopImmediatePropagation();
  12. }

举个栗子：

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.    <div id="div">
  6.       <button id="button">
  7.          点击
  8.       </button>
  9.    </div>
  10. </body>
  11. <script>
  12.    const body = document.body;
  13.    const div = document.querySelector('div');
  14.    const button = document.querySelector('button');
  16.    button.addEventListener('click', (event) => {
  17.       console.log('button');
  18.      if(event){
  19.       event.stopPropagation();
  20.      }else{
  21.          window.event.cancelBubble = true;
  22.      }
  23.    }, false);
  25.    div.addEventListener('click', (event) => {
  26.       console.log('div');
  27.    }, false);
  29.    body.addEventListener('click', (event) => {
  30.       console.log('body');
  31.    }, false);
  33. </script>
  35. </html>

输出结果：
image.png