JavaScript事件冒泡和捕获如何工作

JavaScript 事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是描述事件如何在 DOM（文档对象模型）树中传播的两种机制

1. 事件捕获： 事件捕获是从根节点（通常是 document 对象）开始，逐级向下捕获子元素上的事件。当事件触发时，首先执行最外层的捕获事件处理程序，然后逐层向内进行，直到到达目标元素。事件捕获阶段可以通过 addEventListener 方法的第三个参数（capture）来设置，将其设置为 true 即可启用捕获模式。

示例：

document.addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true);

element.addEventListener('click', function(event) {
  console.log('目标元素');
}, false);

2. 事件冒泡： 事件冒泡是从目标元素开始，逐级向上传播到根节点。当事件触发时，首先执行目标元素的事件处理程序，然后逐层向外进行，直到到达根节点。事件冒泡阶段可以通过 addEventListener 方法的第三个参数（capture）来设置，将其设置为 false 或省略该参数（默认为 false）即可启用冒泡模式。

示例：

element.addEventListener('click', function(event) {
  console.log('目标元素');
}, false);

document.addEventListener('click', function(event) {
  console.log('冒泡阶段');
}, false);

总结：事件冒泡和事件捕获是描述事件在 DOM 树中传播顺序的两种机制。事件捕获从根节点开始，逐级向下捕获子元素上的事件；而事件冒泡从目标元素开始，逐级向上传播到根节点。通过设置 addEventListener 方法的第三个参数，可以选择启用捕获模式或冒泡模式。