乐趣区

关于javascript:让你学会DOM事件流

jiezi

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>


    完

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

退出移动版