关于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>

   
   完

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