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对象
下图是事件流模型,记为 洋葱模型(先外到内,再内到外)

DOM事件流


历史背景不讲了,总结以下几点

  1. 默认情况下浏览器以事件冒泡形式进行事件传播
  2. 一刀插过洋葱,先外到内,再内到外,既事件流先由最外层document捕获到目标元素,再经目标元素冒泡到document
  3. 如果要触发捕获阶段事件,在上面介绍的方法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>

上面的代码中,rootclick事件不会触发了。

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>

DOM事件流

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>

DOM事件流

注意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>

DOM事件流

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>

DOM事件流

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

上一篇:10、事件高级


下一篇:移动端如何自动适配px