什么是事件冒泡和事件捕获

事件冒泡和事件捕获是两种处理网页中事件传播的机制，特别是在 JavaScript 中处理 DOM 事件时，它们决定了事件如何从一个元素传播到另一个元素。

1. 事件传播机制

事件传播指的是，当某个 DOM 元素触发事件时，这个事件会在父元素和子元素之间传播。事件传播分为三个阶段：

捕获阶段：事件从文档的根元素（document）开始，逐级向下传播到目标元素。
目标阶段：事件到达目标元素，并在该元素上触发。
冒泡阶段：事件从目标元素逐级向上传播，直到文档的根元素。

2. 事件冒泡（Event Bubbling）

事件冒泡指的是事件从目标元素逐级向上传播到父级元素，直到根元素的过程。它是事件传播的默认行为。在这个阶段，如果目标元素的事件被触发，其父级、祖父级等元素上的同类型事件处理器也会被依次触发。

示例： 假设有以下 HTML 结构：

<div id="parent"><button id="child">Click me</button>
</div>

如果你给按钮元素（#child）绑定一个点击事件，同时给它的父元素（#parent）也绑定了一个点击事件，那么当你点击按钮时，事件会首先在按钮上触发，然后会冒泡到父元素（#parent）上，触发它的点击事件。

document.getElementById('parent').addEventListener('click', () => {console.log('Parent clicked');
});document.getElementById('child').addEventListener('click', () => {console.log('Child clicked');
});

打印结果：

Child clicked
Parent clicked

3. 事件捕获（Event Capturing）

事件捕获指的是事件从根元素逐级向下传播到目标元素的过程。在这个阶段，事件首先会从文档的最外层元素开始捕获，然后逐级向下到目标元素。

默认情况下，事件处理程序是在事件冒泡阶段触发的，但你可以通过在addEventListener中将第三个参数设置为true，将事件处理器绑定到捕获阶段。

document.getElementById('parent').addEventListener('click', () => {console.log('Parent clicked');
}, true);document.getElementById('child').addEventListener('click', () => {console.log('Child clicked');
}, true);

在捕获阶段，点击按钮会打印：

Parent clicked
Child clicked

4. 事件冒泡和事件捕获的区别

事件冒泡：事件从目标元素向上传播，先触发目标元素上的事件，再触发父元素上的事件。
事件捕获：事件从根元素向下传播，先触发父元素上的事件，再触发目标元素上的事件。

5. 阻止事件传播

在 JavaScript 中，你可以使用stopPropagation()方法来阻止事件的进一步传播，不论是冒泡还是捕获阶段。

document.getElementById('child').addEventListener('click', (event) => {event.stopPropagation();  // 阻止事件继续传播console.log('Child clicked');
});

这样，点击按钮后，Parent clicked不会被打印，因为事件在按钮元素被阻止了。

总结

事件冒泡：事件从目标元素向上传播到其祖先元素。
事件捕获：事件从祖先元素向下传播到目标元素。
默认行为：事件冒泡是默认的，事件捕获需要明确启用。