JS事件机制全解，手把手教你搞定event流程

<div id="outer">
  <div id="inner">
    Click Me!
  </div>
</div>

<script>
  document.getElementById('inner').addEventListener('click', function(event) {
    console.log('Inner div clicked');
  });

  document.getElementById('outer').addEventListener('click', function(event) {
    console.log('Outer div clicked');
  });

  document.addEventListener('click', function(event) {
    console.log('Document clicked');
  });
</script>

当你点击 "Click Me!" 时，控制台会依次输出 "Inner div clicked"、"Outer div clicked" 和 "Document clicked"。这就是事件冒泡的效果。

事件捕获：从顶层文档到目标元素

与事件冒泡相反，事件捕获是从顶层文档开始，逐级向下传播到目标元素。也就是说，事件会先被最外层的元素捕获，然后依次传递到内层元素，直到到达目标元素。

要使用事件捕获，需要在addEventListener()方法的第三个参数设置为true：

<div id="outer">
  <div id="inner">
    Click Me!
  </div>
</div>

<script>
  document.getElementById('inner').addEventListener('click', function(event) {
    console.log('Inner div clicked');
  });

  document.getElementById('outer').addEventListener('click', function(event) {
    console.log('Outer div clicked');
  }, true); // 启用捕获

  document.addEventListener('click', function(event) {
    console.log('Document clicked');
  }, true); // 启用捕获
</script>

在这种情况下，点击 "Click Me!" 时，控制台会依次输出 "Document clicked"、"Outer div clicked" 和 "Inner div clicked"。注意，默认情况下，addEventListener()方法的第三个参数是false，也就是使用事件冒泡。

事件委托：利用冒泡提高性能

事件委托是一种利用事件冒泡机制来提高性能的技术。它的核心思想是，将事件监听器绑定到父元素上，而不是绑定到每个子元素上。当子元素上的事件被触发时，由于事件冒泡，父元素上的监听器也会被触发。然后，父元素可以根据事件的目标元素来判断具体是哪个子元素触发了事件，并执行相应的操作。

例如，你有一个包含多个