JavaScript 事件冒泡和事件捕获

JavaScript 事件冒泡和事件捕获是两种处理 DOM 事件机制的方式，它们的区别在哪里呢？本文将会从以下几个方面进行详细阐述：

一、事件冒泡和事件捕获的简介

事件冒泡和事件捕获是 DOM 事件机制中触发事件后处理过程中两种不同的捕获方式。

在事件冒泡（bubbling）模式中，事件首先在触发元素上被捕获，然后沿着 DOM 树向上传递，直到到达文档的根节点。在此过程中，会触发所有的父元素的相应事件处理函数。

而在事件捕获（capturing）模式中，事件首先被捕获到文档的根节点，然后从根节点沿着 DOM 树一层层向下传递，直到到达触发元素。在此过程中，会触发所有的父元素的相应事件处理函数。

二、事件冒泡和事件捕获的区别

1、触发顺序不同

在事件冒泡模式中，事件处理的顺序是从触发元素开始，由内向外逐步冒泡，最终到达 document 元素。

而在事件捕获模式中，事件处理的顺序是从 document 元素开始，由外向内逐步捕获，最终到达触发元素。

2、事件处理的方式不同

在事件冒泡模式中，事件的处理方式是先从子节点开始，再向父节点传递。也就是说，先触发节点自己的事件处理函数，再依次触发父元素的事件处理函数。

而在事件捕获模式中，事件的处理方式是先从父节点开始，再向子节点传递。也就是说，先触发 document 的事件处理函数，然后依次触发子节点的事件处理函数。

3、默认事件优先级不同

默认情况下，事件冒泡和事件捕获模式都会触发默认的事件处理函数。但是，在事件冒泡模式中默认的事件处理函数会在所有的父节点处理完之后再触发，而在事件捕获模式中默认的事件处理函数则会在到达目标元素之前被触发。

三、代码示例

1、事件冒泡模式的代码示例

  
    <div id="grandparent">
      <div id="parent">
        <button id="button">点击我</button>
      </div>
    </div>

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function() {
        console.log('触发 grandparent 的点击事件处理函数');
      }, false);

      parent.addEventListener('click', function() {
        console.log('触发 parent 的点击事件处理函数');
      }, false);

      button.addEventListener('click', function() {
        console.log('触发 button 的点击事件处理函数');
      }, false);
    </script>

在上面的代码中，当我们点击 button 按钮时，输出的结果是：

  
  触发 button 的点击事件处理函数
  触发 parent 的点击事件处理函数
  触发 grandparent 的点击事件处理函数

由此可见，事件处理是从子节点开始，依次向上父节点冒泡传递。

2、事件捕获模式的代码示例

  
    <div id="grandparent">
      <div id="parent">
        <button id="button">点击我</button>
      </div>
    </div>

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function () {
        console.log('触发 grandparent 的点击事件处理函数');
      }, true);

      parent.addEventListener('click', function () {
        console.log('触发 parent 的点击事件处理函数');
      }, true);

      button.addEventListener('click', function () {
        console.log('触发 button 的点击事件处理函数');
      }, true);
    </script>

在上面的代码中，当我们点击 button 按钮时，输出的结果是：

  
  触发 grandparent 的点击事件处理函数
  触发 parent 的点击事件处理函数
  触发 button 的点击事件处理函数

由此可见，事件处理是从 document 节点开始，依次向下子节点传递。

四、总结

事件冒泡和事件捕获是 JavaScript 中用于处理 DOM 事件机制的两种不同的方式。区别在于事件的触发顺序、事件的处理方式以及默认事件的触发时机等。在实际开发中，可以根据具体需求选择使用合适的方式。

原创文章，作者：LAPFR，如若转载，请注明出处：https://www.506064.com/n/370929.html