事件冒泡和事件捕获

今天是2023年11月19日  天气晴

静下心来

最近感觉比较忙，但又不知道忙些什么，明明已经没参加什么活动，但还是感觉自己的事情很多，每天看着大一的进进出出，开始有点后悔自己在大一时没有多学点东西，到大二开始担心的事情逐渐比较多了，想着四级考试，想着专业课成绩，又想着每日的计划。感觉生活浑浑噩噩，现在发现不如早点放弃一些不值得焦虑的思考，比如专业课成绩，可以先慢慢学习老师在课堂上的知识，在集中时间解决不会的问题，零零碎碎的时间总是集中不了精神，不如就放空自己，集中精力做一件事。

事件委托和事件冒泡以及事件捕获

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

• 事件捕获：事件从最外层的祖先元素向目标元素传播，然后在目标元素上触发。
• 事件冒泡：事件从目标元素开始，向上传播至最外层的祖先元素，直至根节点。

事件冒泡

<div id="outer" style="padding: 20px; background-color: #eee;">
  <div id="middle" style="padding: 20px; background-color: #ccc;">
    <button id="inner">Click me!</button>
  </div>
</div>

给每个元素添加点击事件处理程序，并在控制台中输出它们的id： 

document.getElementById('outer').addEventListener('click', function() {
  console.log('Clicked outer');
});

document.getElementById('middle').addEventListener('click', function() {
  console.log('Clicked middle');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Clicked inner');
});

点击 "Click me!" 按钮时，控制台上输出了以下内容：

Clicked inner
Clicked middle
Clicked outer

这就是事件冒泡的效果：点击最内层的按钮后，点击事件从按钮开始向上传播，首先触发按钮自身的点击事件处理程序，然后冒泡到包裹按钮的中间元素，再到最外层的外部元素。事件冒泡的过程只在最内层的按钮上添加了点击事件处理程序，但事件仍然会冒泡到它的父元素，直至根元素。

 事件捕获

还是以上述html代码为例，为其添加事件捕获

document.getElementById('outer').addEventListener('click', function() {
  console.log('Capturing outer');
}, true);

document.getElementById('middle').addEventListener('click', function() {
  console.log('Capturing middle');
}, true);

document.getElementById('inner').addEventListener('click', function() {
  console.log('Capturing inner');
}, true);

在添加事件监听器时传入了第三个参数 true，表示使用事件捕获

代码打印

Capturing outer
Capturing middle
Capturing inner

注意到输出的顺序是和事件捕获的传播方向相反的，即从最外层的祖先元素向目标元素传播。这就是事件捕获的过程：点击最内层的按钮后，事件会从最外层的祖先元素开始捕获，然后依次传播到目标元素

事件委托

事件委托是一种利用事件冒泡的机制，将事件处理程序添加到父元素而不是每个子元素上的技术。这样做有助于提高性能，并简化代码逻辑。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

使用事件委托，我们可以将点击事件处理程序添加到父元素上，并通过事件对象来判断用户实际点击的是哪个列表项

document.getElementById('myList').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on ' + event.target.textContent);
  }
});

只需将点击事件处理程序添加到父元素 ul 上，而不需要为每个列表项 li 单独添加处理程序。当用户点击列表项时，事件会冒泡至父元素 ul，然后通过事件对象的 target 属性来判断实际点击的是哪个列表项，从而执行相应的操作

事件委托可以减少事件处理程序的数量，提高性能，并且使代码更易于维护。

总结

事件冒泡和事件捕获都是为了解决在嵌套元素中处理事件的问题，它们可以根据实际需求选择使用。事件委托则是一种利用事件冒泡机制的技巧，可以简化代码并提高性能，在事件流中都有着重要作用