一起来学习一下JavaScript的事件流

2023年6月10日下午12:26 • JavaScript

关于JavaScript事件流，我为大家准备了一份完整攻略，一起来学习一下。

什么是JavaScript事件流

JavaScript事件流是指浏览器中发生事件（如鼠标点击、键盘输入等）时，事件在DOM树结构中按照特定顺序发送和处理的过程。这个过程包含三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段

在事件到达目标元素之前，从根节点到目标元素之间的所有节点都会接受到该事件的通知。这个过程叫做捕获阶段。

示例：

<html>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
  </body>
</html>

<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click', function(){
      console.log('outer capture');
    }, true);
    inner.addEventListener('click', function(){
      console.log('inner capture');
    }, true);
    outer.addEventListener('click', function(){
      console.log('outer bubble');
    }, false);
    inner.addEventListener('click', function(){
      console.log('inner bubble');
    }, false);
</script>

页面中有两个div元素，分别为外层div和内层div，外层div包含了内层div。通过JS代码给两个div元素绑定了两个click事件，分别在捕获阶段和冒泡阶段输出对应的信息。当我们在内层div上点击鼠标时，事件就会沿着根节点 -> 外层div -> 内层div的顺序进行捕获，最后到达目标元素内层div。在这个过程中，'outer capture'和'inner capture'两个信息会被输出。注意，代码中addEventListener第三个参数用来控制事件是否在捕获阶段执行，默认值是false，即事件在冒泡阶段执行。

目标阶段

目标阶段，即事件已经到达目标元素本身。如果该元素绑定了相应的事件处理函数，那么就开始执行该函数。如果在该元素上绑定了多个相同事件的处理函数，那么先绑定的会先执行。

示例：

<html>
  <body>
    <button id="button">Click me!</button>
  </body>
</html>

<script>
    var button = document.getElementById('button');
    button.addEventListener('click', function(){
      console.log('first click');
    });
    button.addEventListener('click', function(){
      console.log('second click');
    });
</script>

页面中有一个按钮，JS代码中给该按钮绑定了两个click事件处理函数，分别输出'first click'和'second click'。当我们点击按钮时，在目标阶段会输出这两个信息。

冒泡阶段

在冒泡阶段，事件开始从目标元素返回到根节点。在这个过程中，根据DOM结构，从目标元素到根节点的每个节点都将接收该事件通知。注意，HTML标签本身是节点，所以根节点到目标元素期间每个HTML标签都会接收到事件通知。

示例：

<html>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
  </body>
</html>

<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click', function(){
      console.log('outer bubble');
    }, false);
    inner.addEventListener('click', function(){
      console.log('inner bubble');
    }, false);
    outer.addEventListener('click', function(){
      console.log('outer capture');
    }, true);
    inner.addEventListener('click', function(){
      console.log('inner capture');
    }, true);
</script>

和第一个示例中相同的代码，只是事件处理函数的调用阶段改为冒泡阶段。这时，在内层div上点击鼠标时，事件会沿着内层div -> 外层div -> 根节点的顺序进行冒泡，最后输出'outer bubble'和'inner bubble'。