js 事件模型 事件捕获、事件冒泡

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

事件冒泡（event bubbling）和事件捕获（event capturing）是指在 DOM 树中处理事件的两种不同方式。

事件捕获：

事件从DOM树的根节点开始，然后逐级向下捕获到最具体的元素（目标元素）。当事件捕获时，父级元素的事件处理程序会在子级元素的事件处理程序之前被触发。

找到目标元素dom  document → html → body → div

事件捕获的使用场景： 事件捕获在实际开发中使用较少。

事件处理程序前置操作：如果你需要在事件达到特定元素之前执行一些操作，例如在事件到达目标元素之前进行验证或修改事件的行为，可以使用事件捕获。通过在父级元素上使用事件捕获，你可以在事件到达目标元素之前拦截事件并进行处理。

高级事件处理：一些复杂的交互行为可能需要更细粒度的控制，而事件捕获提供了这种能力。例如，你可能需要在事件捕获阶段使用stopPropagation方法停止事件的传播，以防止事件继续向下冒泡。

事件冒泡：

事件从触发它的最具体的元素（目标元素）开始，然后逐级向上冒泡到上一层的元素，直到达到DOM树的根节点。当事件冒泡时，父级元素的事件处理程序会在子级元素的事件处理程序之后被触发。

div → body → html → document  事件对应的操作通知到最顶层

事件冒泡的使用场景： 事件冒泡的一个常见应用场景是事件委托（event delegation）。通过事件委托，我们可以将事件处理程序绑定到父级元素，而不是直接绑定到每个子元素，从而减少了事件处理程序的数量，提高了性能和代码的可维护性。

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

1. 触发顺序：事件捕获先于事件冒泡触发。在事件捕获阶段，事件从DOM树的根节点向下传播到目标元素；在事件冒泡阶段，事件从目标元素向上冒泡到根节点。
2. 事件处理程序执行顺序：在事件捕获阶段，父级元素的事件处理程序会先于子级元素的事件处理程序执行；在事件冒泡阶段，子级元素的事件处理程序会先于父级元素的事件处理程序执行。
3. 默认阶段：大多数事件处理程序默认情况下在事件冒泡阶段触发，因此它们通常在事件冒泡阶段被执行。但是，可以使用addEventListener的第三个参数来指定事件是在事件捕获阶段还是事件冒泡阶段处理。

在实际开发中，事件冒泡通常用得更多，因为它更符合常见的需求。通过事件冒泡，我们可以从子元素向父元素传递事件，便于事件委托和处理。然而，如果你需要更细粒度的控制事件的流动，或者需要在目标元素之前处理事件，那么可以使用事件捕获。

应用场景

监听事件：

addEventListener(type, function, boolean) // boolean是 true 在捕获阶段触发，false 在冒泡阶段触发，默认为 false

DOM1 是绑定一个函数；DOM2 是绑定一个队列，可以多个方法绑定同一事件。

btn.addEventListener('click', f1)

btn.addEventListener('click', f2) 

代码解释:

    我们在父级元素parent和子级元素child上分别使用事件捕获来绑定事件处理程序。
    通过设置addEventListener的第三个参数为true，我们指定了使用事件捕获模式。
    当点击按钮btn时，事件的触发顺序将是：parent捕获阶段 -> child捕获阶段 -> btn冒泡阶段。
    通过观察控制台输出，你可以看到事件处理程序按照捕获阶段的顺序被触发。
    输出顺序：parent child button

// 在事件捕获阶段触发事件处理程序
parent.addEventListener('click', function() {
  console.log('Parent element is clicked');
}, true);

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

btn.addEventListener('click', function() {
  console.log('Button is clicked');
});

removeEventListener(type, funcName)  // 只能移除具名函数

题外话：不移除 eventListener 会有什么弊端？

• 避免内存泄漏：在 JavaScript 中，如果一个对象被引用但不再使用，它仍然会占用内存。如果我们添加了很多事件监听器，并且不及时将它们移除，那么这些事件监听器会一直占用内存，导致内存泄漏。
• 避免重复触发事件：有些事件可能会被触发多次，例如 scroll 事件。如果我们不移除事件监听器，那么每次事件被触发时，都会执行事件处理程序。这可能会导致程序出现问题或性能下降。
• 改变元素状态：某些事件会改变元素的状态，例如 mouseover 和 mouseout 事件。如果我们不及时移除这些事件监听器，那么它们会一直改变元素状态，导致用户体验不佳。

stopPropagation()  事件不传给其他的节点，阻止事件传播，什么时间阻止取决于调用方法的时间

preventDefault()  阻止默认的事件行为

比如：a标签 href 跳转，写了preventDefault 会阻止跳转，写了stopPropagation还是可以跳转，只是阻止了后续的冒泡/捕获。

事件委托：

我们将事件处理程序绑定到父级元素myList上，并使用事件对象的target属性来确定被点击的元素。
如果被点击的元素是li元素，我们就可以执行相应的操作（在这个示例中，只是简单地将被点击元素的文本内容打印到控制台）。
通过使用事件委托，我们无需为每个子元素都添加事件处理程序，而是将事件处理程序添加到父级元素上，利用事件冒泡来捕获和处理事件，从而简化了代码结构，并且对于动态添加或删除的子元素也能正常工作。

html:

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

js:

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

// 事件委托：将事件处理程序绑定到父级元素
myList.addEventListener('click', function(event) {
  // 检查被点击的元素是否是<li>元素
  if (event.target.tagName === 'LI') {
    // 执行针对<li>元素的操作
    console.log('Clicked on:', event.target.textContent);
  }
});