关于javascript:让你学会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>

   
   完

   如有谬误，请斧正，欢送评论交换，关注我，只写干货