深入理解JavaScript的事件冒泡与事件捕获
前言
JavaScript中提供了很多操作DOM的API。
事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。
对于这个问题，在实际开发中，并不是非常重要，因为在工作中我们基本上不会直接操作DOM，为了高效一般都是通过Vue、React这些框架，所以关于事件处理程序的一些坑直接就被避免了！！！
但是，多了解一点是没有坏处的，毕竟面试会考~
一、事件冒泡
事件冒泡（Event Bubbling）是指当一个元素触发了某个事件时，该事件会从最具体的元素开始逐级向上传播到较为不具体的元素（也就是从子元素向父元素方向传播），直到传播到文档的根节点为止。这种传播方式就像气泡从水底冒出水面一样，所以叫做事件冒泡。
举个例子，假设有一个包含两个嵌套 div 元素的 HTML 结构如下：
<div id="outer">
<div id="inner">
<button>点击我</button>
</div>
</div>当我们在按钮上点击时，事件会按照如下顺序进行冒泡：
首先，按钮元素触发点击事件。
然后，该事件会从最具体的元素（按钮元素）开始向外传播到其父元素（内部 div 元素）。
接着，该事件继续向外传播到外部 div 元素。
最后，该事件传播到文档的根节点（HTML 元素）。
在这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。这意味着，当点击按钮时，除了按钮本身的事件处理程序之外，内部 div 和外部 div 元素也可以捕获并处理该事件。
可以通过 JavaScript 的 Event 对象来阻止事件冒泡。例如，可以使用 event.stopPropagation() 方法来阻止事件继续向外传播。
二、事件捕获
事件捕获（Event Capturing）是一种处理事件的方式，与事件冒泡相反。事件捕获从文档根节点开始，逐级向下传播到最具体的元素，也就是从父元素向子元素方向传播。
与事件冒泡不同，事件捕获在元素本身触发事件之前被触发。具体来说，事件会从文档根节点开始向下传播，直到达到触发该事件的最具体的元素。这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。
还是刚才的例子
<div id="outer">
<div id="inner">
<button>点击我</button>
</div>
</div>当我们在按钮上点击时，事件会按照如下顺序进行捕获：
首先，该事件从文档的根节点开始向下传播到最外层的元素（外部 div 元素）。
然后，该事件继续向下传播到内部的 div 元素。
最后，该事件传播到触发该事件的最具体的元素（按钮元素）。
在这个过程中，每个元素都可以在自己的事件处理程序中处理该事件。这意味着，当点击按钮时，除了按钮本身的事件处理程序之外，内部 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事件模型的优点：
支持事件捕获和事件冒泡。事件捕获和事件冒泡是DOM2事件模型的核心特性之一，使得事件处理程序能够在DOM树中不同的层级进行注册，从而更好地控制事件的传播和处理。
可以同时添加多个事件处理程序。通过addEventListener()方法，可以为同一个事件添加多个事件处理程序，而不会覆盖先前添加的事件处理程序。
可以从HTML元素上删除事件处理程序。使用removeEventListener()方法可以方便地从HTML元素上删除事件处理程序，而不必像DOM0事件模型那样通过将事件处理程序设置为null来达到删除的效果。
支持事件对象。在DOM2事件模型中，事件处理程序会接收一个事件对象作为参数，该事件对象包含有关事件的详细信息，例如事件类型、事件目标、鼠标位置等，从而能够更好地处理和控制事件。
综上所述，DOM2事件模型是一种功能更强大、更灵活的事件模型，相比于DOM0事件模型和IE事件模型更加推荐使用。
四、两者能干什么？
使用事件冒泡和事件捕获可以实现：
事件委托：可以将事件处理程序绑定到父元素而不是子元素上。当子元素触发该事件时，事件将沿着冒泡路径传递到父元素，由父元素的事件处理程序进行处理。这样可以减少事件处理程序的数量，提高性能和可维护性。
事件拦截：通过在事件处理程序中调用 event.stopPropagation() 方法，可以阻止事件继续传播，从而避免不必要的事件触发和处理。
多个事件处理程序的执行顺序控制：通过在捕获或冒泡阶段注册事件处理程序，并控制其在事件传播路径上的位置，可以控制多个事件处理程序的执行顺序。
总之，了解和使用事件冒泡和事件捕获可以帮助我们更好地处理 HTML 和 JavaScript 中的事件，提高代码的可维护性和性能。