什么是事件冒泡？ 如何防止事件冒泡？

事件冒泡是指在处理一个特定的事件时，如果该事件在某个元素上被触发，那么该事件会从该元素开始被处理，然后逐级向上冒泡到该元素的祖先元素，直到到达文档根节点为止。这种冒泡机制可以让事件在整个 DOM 树中被传递和处理。

为了防止事件冒泡，可以使用事件对象提供的 stopPropagation() 方法或者 cancelBubble 属性来阻止事件继续冒泡。这两个方法都可以在事件处理程序中调用。例如，以下代码可以阻止一个按钮的 click 事件冒泡到其父元素：

document.querySelector('button').addEventListener('click', function(event) {
  event.stopPropagation();
});

除了 stopPropagation() 方法和 cancelBubble 属性，还可以使用事件的 capture 选项来阻止事件冒泡。将该选项设置为 true 可以在事件捕获阶段处理事件，从而阻止事件冒泡到目标元素和其祖先元素。例如：

document.querySelector('div').addEventListener('click', function(event) {
  console.log('Capturing phase');
}, true);

document.querySelector('div').addEventListener('click', function(event) {
  console.log('Bubbling phase');
});

在上述代码中，事件在 div 元素的捕获阶段被处理，因此不会冒泡到文档根节点。