DOM事件流

2023-12-23 14:14:04

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()阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发

举例

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>

完

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

码农公寓