让你学会DOM事件流

1. 常用事件绑定方式

1.1 对象属性绑定

<button id="btn">点我</button>
<script>
  var btn = document.getElementById("btn");
  btn.onclick = function() {
    console.log("事件触发")
  }
</script>

1.2 addEventListener()绑定

<button id="btn">点我</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () { 
    console.log("事件触发");
  });
</script>

addEventListener第三个参数，Boolean类型值，可指定事件冒泡阶段还是捕获阶段触发，true-捕获，false-冒泡，默认false，既冒泡。

1.3 两种方式区别

• 对象属性绑定方式只能绑定一次，重复绑定同一事件类型，前面的会被后面的覆盖

  下面代码中，“事件触发-1”不会执行了，被下面的onclick覆盖了
  其实这种类似对象属性，同一个key，重新赋值会覆盖前面的值

  <button id="btn">点我</button>
  <script>
  var btn = document.getElementById("btn");
  btn.onclick = function() {
    console.log("事件触发-1")
  }
  btn.onclick = function() {
    console.log("事件触发-2")
  }
  </script>

  * addEventListener没有重复绑定覆盖的问题，同一元素可以绑定同一事件类型多次

  下面代码中，按钮点击时，事件会__依次触发__

  <button id="btn">点我</button>
  <script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () { 
    console.log("事件触发-1");
  });
  btn.addEventListener("click", function () { 
    console.log("事件触发-2");
  });
  btn.addEventListener("click", function () { 
    console.log("事件触发-3");
  });
  </script>

• addEventListener提供事件是在捕获阶段还是在冒泡阶段触发

  2. 事件流

  2.1 概念

  事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

  2.2 事件顺序

  <div id="root">
  <button id="btn">点我</button>
  </div>

  2.2.1 捕获阶段

  在页面中点击button，首先document接收到click事件，然后沿着dom树，依次向下，直到实际事件触发元素，既button节点，这一过程称为事件捕获过程，是从外到内的传播过程。

  2.2.2 目标阶段

  经过事件捕获阶段后，然后是实际目标接收到事件即处于目标阶段

  2.2.3 冒泡阶段

  从目标元素，沿着dom树，逐级向上传递，直到document对象
  下图是事件流模型，记为 洋葱模型(先外到内，再内到外)
  
  历史背景不讲了，总结以下几点

• 默认情况下浏览器以事件冒泡形式进行事件传播
• 一刀插过洋葱，先外到内，再内到外，既事件流先由最外层document捕获到目标元素，再经目标元素冒泡到document

• 如果要触发捕获阶段事件，在上面介绍的方法addEventListener设置第三个参数为false即可

  3. 阻止事件冒泡

  3.1 event.stopPropagation()

  有时父元素和其子元素都绑定了同一类型事件，我们不想让事件向上传播，触发哪个元素的事件，就执行那个元素的事件处理，不干扰其他元素事件。
  这时就需要阻止事件冒泡

  方法：event.stopPropagation()

  <div id="root">
   <button id="btn">点我</button>
  </div>
  <script>
  var root = document.getElementById("root");
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function (event) { 
    event.stopPropagation();
    console.log("btn-事件触发");
  });
  root.addEventListener("click", function () { 
    console.log("root-事件触发");
  });
  </script>

  上面的代码中，root的click事件不会触发了。

  3.2 stopPropagation与stopImmediatePropagation区别

  相同点

  都能阻止事件冒泡

不同点

stopImmediatePropagation() 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发

举例

1. stopPropagation只能单纯的阻止冒泡

   <div id="root">
   <button id="btn">点我</button>
   </div>
   <script>
     var root = document.getElementById("root");
     var btn = document.getElementById("btn");
     btn.addEventListener("click", function (event) { 
    event.stopPropagation();
    console.log("btn-事件触发1");
     });
     btn.addEventListener("click", function () { 
    console.log("btn-事件触发2");
     });
     root.addEventListener("click", function () { 
    console.log("root-事件触发");
     });
   </script>

   

2. stopImmediatePropagation 阻止后面同类型事件触发

   <div id="root">
   <button id="btn">点我</button>
   </div>
   <script>
     var root = document.getElementById("root");
     var btn = document.getElementById("btn");
     btn.addEventListener("click", function (event) { 
    event.stopImmediatePropagation();
    console.log("btn-事件触发1");
     });
     btn.addEventListener("click", function () { 
    console.log("btn-事件触发2");
     });
     root.addEventListener("click", function () { 
    console.log("root-事件触发");
     });
   </script>

   

   注意stopImmediatePropagation，只能阻止后面事件不触发
   下面代码中，只有”btn-事件触发3“不执行

   <div id="root">
   <button id="btn">点我</button>
   </div>
   <script>
     var root = document.getElementById("root");
     var btn = document.getElementById("btn");
     btn.addEventListener("click", function () {
    console.log("btn-事件触发1");
     });
     btn.addEventListener("click", function (event) {
    event.stopImmediatePropagation();
    console.log("btn-事件触发2");
     });
     btn.addEventListener("click", function () {
    console.log("btn-事件触发3");
     });
     root.addEventListener("click", function () {
    console.log("root-事件触发");
     });
   </script>

   

   4. 事件流实战

   <div id="root">
     <button id="btn">点我</button>
   </div>
   <script>
     var root = document.getElementById("root");
     var btn = document.getElementById("btn");
     document.addEventListener(
    "click",
    function () {
      console.log("document-捕获");
    },
    true
     );
     document.addEventListener("click", function () {
    console.log("document-冒泡");
     });
     root.addEventListener(
    "click",
    function () {
      console.log("root-捕获");
    },
    true
     );
     root.addEventListener("click", function () {
    console.log("root-冒泡");
     });
     btn.addEventListener(
    "click",
    function () {
      console.log("btn-捕获");
    },
    true
     );
     btn.addEventListener("click", function () {
    console.log("btn-冒泡");
     });
   </script>

   
   完

   如有错误，请指正，欢迎评论交流，关注我，只写干货