什么是事件冒泡？- 理解JS中的事件冒泡机制

前言

在编写JavaScript时，我们经常需要处理用户与页面的交互，例如点击按钮、鼠标悬停等事件。为了实现这些交互，我们需要了解事件冒泡机制。

什么是事件冒泡？

事件冒泡指的是，当一个元素上发生了某些事件（比如点击），这个事件会从最内层的元素开始，一直向外层元素传播，直到影响到整个文档。

例如：

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

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

button.addEventListener('click', function() {
  console.log('button clicked');
});

child.addEventListener('click', function() {
  console.log('child clicked');
});

parent.addEventListener('click', function() {
  console.log('parent clicked');
});

当点击button按钮时，事件会经过三个元素，依次触发button、child、parent的click事件。

如何阻止事件冒泡？

有时候我们希望阻止事件冒泡，只触发当前元素的事件，而不会传播到父元素。这时候可以使用事件对象的stopPropagation方法。

例如：

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('button clicked');
  event.stopPropagation();
});

child.addEventListener('click', function(event) {
  console.log('child clicked');
  event.stopPropagation();
});

parent.addEventListener('click', function(event) {
  console.log('parent clicked');
});

在上述代码中，当点击button时，只会触发button的click事件，而不会继续传播到child和parent。

事件捕获

除了事件冒泡，还有另一种事件传播机制，叫做事件捕获。事件捕获的原理与事件冒泡相反，事件从外层元素开始传播，直到最内层元素。

例如：

const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

parent.addEventListener('click', function() {
  console.log('parent clicked');
}, true);

child.addEventListener('click', function() {
  console.log('child clicked');
}, true);

button.addEventListener('click', function() {
  console.log('button clicked');
}, true);

在上述代码中，当点击button时，事件会依次经过parent、child、button，依次触发它们的click事件。

事件委托

事件委托是一种常用的优化性能的方式。它的原理是将事件绑定在父元素上，通过事件冒泡机制，只触发子元素的事件，从而减少事件监听器的数量。

例如：

const parent = document.getElementById('parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('li clicked');
  }
});

在上述代码中，当点击li元素时，事件会冒泡到parent元素，触发parent的click事件，从而实现了对li元素的事件委托。

总结

事件冒泡是JavaScript中的一种事件传播机制，它从最内层元素开始，向外层元素传播，直到影响到整个文档。通过stopPropagation方法可以阻止事件冒泡。除了事件冒泡，事件捕获是另一种事件传播机制，它从外层元素开始，向内层元素传播。事件委托是一种优化性能的方式，它的原理是将事件绑定在父元素上，通过事件冒泡机制，只触发子元素的事件，从而减少事件监听器的数量。