addEventListener 方法的第三个参数是一个可选的布尔值，用于指定事件是在捕获阶段还是冒泡阶段触发，它在事件传播机制中起着重要的作用：
事件传播机制
- 在JavaScript中，当一个事件发生在一个元素上时，该事件会在DOM树中进行传播，这个传播过程分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
- 捕获阶段：事件从文档的根节点开始，沿着DOM树向下传播，直到到达触发事件的目标元素。在这个阶段，事件会依次经过从外层到内层的各个祖先元素，如果在某个祖先元素上绑定了捕获阶段的事件监听器，那么该监听器会在事件传播到该元素时被触发。
- 目标阶段：事件到达触发事件的目标元素，此时会触发该元素上绑定的针对该事件的所有监听器，这些监听器的执行顺序与它们的绑定顺序相同。
- 冒泡阶段：事件从触发事件的目标元素开始，沿着DOM树向上冒泡，依次触发目标元素的各个祖先元素上绑定的相同类型的事件监听器，直到到达文档的根节点。
第三个参数的作用
- 当
addEventListener方法的第三个参数为true时，表示在捕获阶段触发事件监听器。这意味着事件会先从外层元素开始向内层元素传播，在传播过程中如果遇到绑定了捕获阶段事件监听器的祖先元素，就会先执行这些监听器，然后才到达目标元素并执行目标元素上的监听器，最后再向上冒泡执行冒泡阶段的监听器。
// 捕获阶段示例
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer capture');
}, true);
inner.addEventListener('click', function() {
console.log('inner capture');
}, true);
inner.addEventListener('click', function() {
console.log('inner target');
});
outer.addEventListener('click', function() {
console.log('outer bubble');
});
// 当点击 inner 元素时，控制台输出顺序为：outer capture、inner capture、inner target、outer bubble
- 当第三个参数为
false或者不传递该参数时，表示在冒泡阶段触发事件监听器。此时事件先到达目标元素并执行目标元素上的监听器，然后再向上冒泡，依次触发祖先元素上的冒泡阶段事件监听器。
// 冒泡阶段示例
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer bubble');
});
inner.addEventListener('click', function() {
console.log('inner target');
});
outer.addEventListener('click', function() {
console.log('outer capture');
}, true);
inner.addEventListener('click', function() {
console.log('inner capture');
}, true);
// 当点击 inner 元素时，控制台输出顺序为：inner target、outer bubble
实际应用场景
- 事件委托：在事件委托中，通常利用冒泡阶段的事件传播机制，将事件监听器绑定在父元素上，通过判断事件的目标元素来处理多个子元素的相同类型事件。这样可以减少事件监听器的数量，提高性能。例如，在一个列表中，为列表项添加点击事件，可以将点击事件监听器绑定在列表的父元素上，当列表项被点击时，事件会冒泡到父元素，在父元素的事件处理函数中通过判断事件的目标元素来确定具体是哪个列表项被点击。
const list = document.getElementById('myList');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('点击了列表项：', event.target.textContent);
}
});
- 控制事件执行顺序：通过指定第三个参数，可以精确地控制事件监听器的执行顺序，以满足特定的业务需求。例如，在某些情况下，可能需要先执行外层元素的捕获阶段事件监听器，进行一些全局的处理或验证，然后再执行目标元素和冒泡阶段的事件监听器，实现更复杂的交互逻辑。
addEventListener 方法的第三个参数提供了对事件传播阶段的精细控制，使开发人员能够根据具体的业务场景和需求，灵活地处理事件的触发顺序和执行逻辑，从而实现更加丰富和精确的交互效果。
