JavaScript的冒泡与捕获

1.概念。

冒泡事件：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。

捕获事件：网景公司提出的，事件由父元素传递到子元素的过程叫做事件捕获（ture）。

2.冒泡事件与捕获事件的区别

冒泡事件：事件从子级向父级传递。捕获事件：事件从父级传递向子级。

1、触发顺序：事件捕获先于事件冒泡触发。在事件捕获阶段，事件从DOM树的根节点向下传播到目标元素；在事件冒泡阶段，事件从目标元素向上冒泡到根节点。

2、事件处理程序执行顺序：在事件捕获阶段，父级元素的事件处理程序会先于子级元素的事件处理程序执行；在事件冒泡阶段，子级元素的事件处理程序会先于父级元素的事件处理程序执行。

3、默认阶段：大多数事件处理程序默认情况下在事件冒泡阶段触发，因此它们通常在事件冒泡阶段被执行。但是，可以使用addEventListener的第三个参数来指定事件是在事件捕获阶段还是事件冒泡阶段处理。
在实际开发中，事件冒泡通常用得更多，因为它更符合常见的需求。通过事件冒泡，我们可以从子元素向父元素传递事件，便于事件委托和处理。然而，如果你需要更细粒度的控制事件的流动，或者需要在目标元素之前处理事件，那么可以使用事件捕获。

3.原理

事件冒泡的原理： 事件从触发它的最具体的元素（目标元素）开始，然后逐级向上冒泡到更一般的元素，直到达到DOM树的根节点。当事件冒泡时，父级元素的事件处理程序会在子级元素的事件处理程序之前被触发。
事件冒泡的使用场景： 事件冒泡的一个常见应用场景是事件委托（event delegation）。通过事件委托，我们可以将事件处理程序绑定到父级元素，而不是直接绑定到每个子元素，从而减少了事件处理程序的数量，提高了性能和代码的可维护性。

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

事件捕获的使用场景：

（1）事件处理程序前置操作：如果你需要在事件达到特定元素之前执行一些操作，例如在事件到达目标元素之前进行验证或修改事件的行为，可以使用事件捕获。通过在父级元素上使用事件捕获，你可以在事件到达目标元素之前拦截事件并进行处理。
（2）高级事件处理：一些复杂的交互行为可能需要更细粒度的控制，而事件捕获提供了这种能力。例如，你可能需要在事件捕获阶段使用stopPropagation方法停止事件的传播，以防止事件继续向下冒泡。
 

示例代码来演示事件冒泡

首先有三个div  层级分别为d1>d2>d3。为他们分别添加点击事件，当我们点击d1，只会打印d1.

但当我们点击d2 打印结果依次为d2 d1；点击d3  打印结果为d3 d2 d1。这就是冒泡排序，事件从子级向父级传递。

示例代码来演示事件捕获

 在捕获事件触发的前提，我们需要使用事件监听 document.addEventListener('event',funciton(){},true)  这里的true是布尔值判断是否为捕获事件，当为true时，这里为捕获事件，如果为false时，这里就是冒泡事件

  

    Click me
  




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

// 在事件捕获阶段触发事件处理程序
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');
});

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