在JavaScript中，事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是两种常见的事件传播机制。它们可以理解为浏览器处理事件时的不同策略。在本篇博客中，我们将详细介绍这两种机制的工作原理，并且比较它们的异同点。
事件冒泡（Event Bubbling）
事件冒泡指的是当一个元素触发了某个事件时，该事件会从触发元素开始逐级向上冒泡到更高级的父元素上，直至传播到整个文档。
例如，当我们在一个嵌套的HTML结构中点击了一个子元素时，该子元素的点击事件会先被触发，然后依次冒泡到它的父元素、祖先元素，直至传播到Web文档的根元素（即）。
事件冒泡是浏览器默认的事件传播方式，在大多数情况下，我们都是通过使用事件监听器（Event Listener）来处理事件冒泡。
// 例子：事件冒泡
document.querySelector('#parentElement').addEventListener('click', function() {
console.log('Parent Element clicked');
});
document.querySelector('#childElement').addEventListener('click', function() {
console.log('Child Element clicked');
});
在上述例子中，当我们点击子元素时，事件会先触发子元素的点击事件处理函数，并输出"Child Element clicked"。然后，事件会冒泡到父元素，并触发父元素的点击事件处理函数，输出"Parent Element clicked"。
事件捕获（Event Capturing）
与事件冒泡相反，事件捕获是指事件会从文档对象一直传播到触发元素的过程。它是事件冒泡机制的补充，也可以使用事件监听器进行处理。
为了能够使用事件捕获机制，我们需要将事件监听器的第三个参数设置为true。
// 例子：事件捕获
document.querySelector('#parentElement').addEventListener('click', function() {
console.log('Parent Element clicked');
}, true);
document.querySelector('#childElement').addEventListener('click', function() {
console.log('Child Element clicked');
}, true);
在上述例子中，当我们点击子元素时，事件会从根元素开始向下逐级传播，先触发根元素的点击事件处理函数，并输出"Parent Element clicked"。然后，事件会传播到子元素，触发子元素的点击事件处理函数，并输出"Child Element clicked"。
冒泡与捕获的差别
冒泡和捕获机制的主要差别在于事件的传播顺序。冒泡机制从触发元素开始冒泡到父元素和更高级的祖先元素，而捕获机制则从根元素开始向触发元素的方向传播。
此外，事件在传播过程中，会依次触发经过的每个元素的相同类型的事件。例如，点击事件会依次触发从根元素到触发元素的所有元素上的点击事件处理函数。
虽然冒泡机制是浏览器默认的事件传播方式，而捕获机制需要显式地通过事件监听器的第三个参数设置为true来启用。但是，实际的事件处理过程中，我们更常使用事件冒泡机制，因为它更符合我们的预期。
总结
本篇博客详细介绍了JavaScript中常见的事件冒泡和捕获机制。事件冒泡指的是事件从触发元素开始向上冒泡到更高级的父元素，而事件捕获则是事件从根元素开始向触发元素的方向传播。冒泡机制是浏览器默认的传播方式，而捕获机制需要显式地启用。冒泡和捕获机制的主要差别在于事件的传播顺序。虽然我们更常使用事件冒泡机制，但深入理解事件冒泡和捕获机制对于处理复杂的交互逻辑和事件处理是非常有帮助的。
本文来自极简博客，作者：甜蜜旋律，转载请注明原文链接：JavaScript中常见的事件冒泡与捕获机制详解
