在JavaScript中，事件冒泡和事件捕获是两种不同的事件传播机制。它们用于处理在DOM中发生的事件，并决定事件触发的顺序。
事件冒泡
事件冒泡是一种事件从最内层元素逐级向外传播的机制。当一个事件在一个元素上触发时，该事件将从该元素开始向上冒泡，直到达到DOM树的根节点。这意味着父元素上也会触发相同的事件。
事件冒泡有助于实现事件委托。通过在父元素上监听事件，并利用事件冒泡的机制，可以更有效地处理大量相似或动态添加的子元素上的事件。例如，如果有一个包含很多按钮的列表，你可以在整个列表上添加一个事件监听器，而不是为每个按钮都添加一个监听器。
要在JavaScript中使用事件冒泡，可以使用addEventListener方法，将第三个参数设置为true。例如：
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.addEventListener('click', function(event) {
console.log('Parent element clicked');
}, true);
childElement.addEventListener('click', function(event) {
console.log('Child element clicked');
}, true);
在上面的例子中，无论单击parentElement还是childElement，都会触发父元素上的监听器。输出结果会按照冒泡的顺序打印。
事件捕获
相反，事件捕获是一种从DOM树的根节点开始，逐级向下传播的事件机制。当一个事件在一个元素上触发时，事件会从根节点开始捕获，直到达到事件的触发元素。
事件捕获在处理具有特定层次结构的元素时很有用。例如，你可能有一个嵌套的菜单树，单击一个嵌套菜单项时，你可能希望先处理根级菜单项的事件。
要在JavaScript中使用事件捕获，同样使用addEventListener方法，但将第三个参数设置为false，即默认值。
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.addEventListener('click', function(event) {
console.log('Parent element clicked');
}, false);
childElement.addEventListener('click', function(event) {
console.log('Child element clicked');
}, false);
在上面的例子中，无论单击parentElement还是childElement，都会触发子元素上的监听器。输出结果将按照捕获的顺序打印。
阻止事件传播
有时候，在事件传播过程中，我们希望停止事件继续传播。这可以通过调用事件对象的stopPropagation方法来实现。例如：
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.addEventListener('click', function(event) {
console.log('Parent element clicked');
event.stopPropagation();
}, true);
childElement.addEventListener('click', function(event) {
console.log('Child element clicked');
event.stopPropagation();
}, true);
通过在父元素和子元素的事件监听器中调用event.stopPropagation()方法，可以确保事件在不继续向上冒泡或向下捕获的情况下停止传播。
总的来说，事件冒泡和事件捕获是JavaScript中处理DOM事件的两种不同机制。它们可以帮助我们更好地处理事件的传播，以及在处理具有复杂结构的元素时提供更好的灵活性。熟练使用这些机制，可以提高代码的可维护性和扩展性。
本文来自极简博客，作者：清风细雨，转载请注明原文链接：JavaScript中的事件冒泡与事件捕获
