深入理解JavaScript的事件冒泡与事件捕获

前言

JavaScript中提供了很多操作DOM的API。

事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。

对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！

但是，多了解一点是没有坏处的，毕竟面试会考~

一、事件冒泡

事件冒泡（Event Bubbling）是指当一个元素触发了某个事件时，该事件会从最具体的元素开始逐级向上传播到较为不具体的元素（也就是从子元素向父元素方向传播），直到传播到文档的根节点为止。这种传播方式就像气泡从水底冒出水面一样，所以叫做事件冒泡。

举个例子，假设有一个包含两个嵌套 div 元素的 HTML 结构如下：

<div id="outer">
  <div id="inner">
    <button>点击我</button>
  </div>
</div>

当我们在按钮上点击时，事件会按照如下顺序进行冒泡：

1. 首先，按钮元素触发点击事件。

2. 然后，该事件会从最具体的元素（按钮元素）开始向外传播到其父元素（内部 div 元素）。

3. 接着，该事件继续向外传播到外部 div 元素。

4. 最后，该事件传播到文档的根节点（HTML 元素）。

在这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。这意味着，当点击按钮时，除了按钮本身的事件处理程序之外，内部 div 和外部 div 元素也可以捕获并处理该事件。

可以通过 JavaScript 的 Event 对象来阻止事件冒泡。例如，可以使用 event.stopPropagation() 方法来阻止事件继续向外传播。

二、事件捕获

事件捕获（Event Capturing）是一种处理事件的方式，与事件冒泡相反。事件捕获从文档根节点开始，逐级向下传播到最具体的元素，也就是从父元素向子元素方向传播。

与事件冒泡不同，事件捕获在元素本身触发事件之前被触发。具体来说，事件会从文档根节点开始向下传播，直到达到触发该事件的最具体的元素。这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。

还是刚才的例子

<div id="outer">
  <div id="inner">
    <button>点击我</button>
  </div>
</div>

当我们在按钮上点击时，事件会按照如下顺序进行捕获：

1. 首先，该事件从文档的根节点开始向下传播到最外层的元素（外部 div 元素）。

2. 然后，该事件继续向下传播到内部的 div 元素。

3. 最后，该事件传播到触发该事件的最具体的元素（按钮元素）。

在这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。这意味着，当点击按钮时，除了按钮本身的事件处理程序之外，内部 div 和外部 div 元素也可以捕获并处理该事件。

可以通过 JavaScript 的 Event 对象来阻止事件捕获。例如，可以使用 event.preventDefault() 方法来阻止事件的默认行为，也可以使用 event.stopPropagation() 方法来阻止事件继续向下传播。

三、事件处理程序

事件处理程序指的是一段程序代码，它用于响应特定事件的发生。在计算机编程中，事件通常是指用户与程序交互的某个动作，例如点击鼠标、按下键盘键或者在窗口中拖拽对象等。事件处理程序可以是一个函数、方法或者一段程序代码片段，当特定事件发生时，它将被执行。

事件流和事件处理程序是密切相关的概念，事件流定义了事件在程序中的传播方式，而事件处理程序则是用于响应这些事件的程序代码。

JavaScript的事件流

大致可以分成3种：

• DOM0事件流

• DOM2事件流

• IE事件流

DOM0 事件流

当一个事件发生时，它首先在捕获阶段被处理，然后在冒泡阶段被处理。捕获阶段是从根节点到目标节点的过程，冒泡阶段则是从目标节点到根节点的过程。在 DOM0 事件流中，只有在冒泡阶段才会处理事件处理程序。

DOM2 事件流

与 DOM0 事件流不同，DOM2 事件流允许在捕获阶段和冒泡阶段都可以处理事件处理程序。这种事件流的好处在于可以更灵活地控制事件处理的顺序。

IE 事件流

IE 事件流与 DOM2 事件流类似，但是在捕获阶段和冒泡阶段的顺序相反，即从目标元素到根元素的捕获阶段，然后是从根元素到目标元素的冒泡阶段。

DOM2 事件流相对于 DOM0 事件流和 IE 事件流更加灵活和可控，因此是更好的选择。不过，为了保证跨浏览器的兼容性，通常需要在事件处理程序中同时使用捕获和冒泡两个阶段。

DOM0、DOM2和IE事件有什么区别？

DOM0和DOM2是两个不同版本的DOM事件模型，而IE事件模型是一种与DOM事件模型不同的事件模型。

DOM0事件模型指的是最初的DOM事件模型，它是在1998年定义的。在DOM0事件模型中，事件处理程序直接被添加到HTML元素的属性中，例如：

<button onclick="alert('Hello world!')">Click me</button>

在这个例子中，点击按钮时，将弹出一个警告框，因为事件处理程序直接在按钮元素的onclick属性中定义。

DOM2事件模型是一个更加现代的事件模型，它是在2000年定义的。在DOM2事件模型中，事件处理程序通过addEventListener()方法添加到HTML元素上，例如：

document.querySelector('button').addEventListener('click', function() {
  alert('Hello world!');
});

在这个例子中，点击按钮时，将弹出一个警告框，因为事件处理程序通过addEventListener()方法添加到按钮元素上。

与DOM事件模型不同，IE事件模型使用attachEvent()方法将事件处理程序添加到HTML元素上，例如：

document.querySelector('button').attachEvent('onclick', function() {
  alert('Hello world!');
});

在这个例子中，点击按钮时，将弹出一个警告框，因为事件处理程序通过attachEvent()方法添加到按钮元素上。

DOM0事件模型和IE事件模型的主要区别在于事件处理程序的添加方式，而DOM2事件模型引入了更多的功能，如事件捕获和事件冒泡，并且可以同时添加多个事件处理程序。

哪一种模型更好？

在现代Web开发中，推荐使用DOM2事件模型，因为它提供了更多的功能和灵活性，可以更好地控制和管理事件。以下是一些使用DOM2事件模型的优点：

1. 支持事件捕获和事件冒泡。事件捕获和事件冒泡是DOM2事件模型的核心特性之一，使得事件处理程序能够在DOM树中不同的层级进行注册，从而更好地控制事件的传播和处理。

2. 可以同时添加多个事件处理程序。通过addEventListener()方法，可以为同一个事件添加多个事件处理程序，而不会覆盖先前添加的事件处理程序。

3. 可以从HTML元素上删除事件处理程序。使用removeEventListener()方法可以方便地从HTML元素上删除事件处理程序，而不必像DOM0事件模型那样通过将事件处理程序设置为null来达到删除的效果。

4. 支持事件对象。在DOM2事件模型中，事件处理程序会接收一个事件对象作为参数，该事件对象包含有关事件的详细信息，例如事件类型、事件目标、鼠标位置等，从而能够更好地处理和控制事件。

综上所述，DOM2事件模型是一种功能更强大、更灵活的事件模型，相比于DOM0事件模型和IE事件模型更加推荐使用。

四、两者能干什么？

使用事件冒泡和事件捕获可以实现：

1. 事件委托：可以将事件处理程序绑定到父元素而不是子元素上。当子元素触发该事件时，事件将沿着冒泡路径传递到父元素，由父元素的事件处理程序进行处理。这样可以减少事件处理程序的数量，提高性能和可维护性。

2. 事件拦截：通过在事件处理程序中调用 event.stopPropagation() 方法，可以阻止事件继续传播，从而避免不必要的事件触发和处理。

3. 多个事件处理程序的执行顺序控制：通过在捕获或冒泡阶段注册事件处理程序，并控制其在事件传播路径上的位置，可以控制多个事件处理程序的执行顺序。

总之，了解和使用事件冒泡和事件捕获可以帮助我们更好地处理 HTML 和 JavaScript 中的事件，提高代码的可维护性和性能。