JavaScript中捕获与冒泡详解及实例

下面给出详细讲解JavaScript中捕获与冒泡的攻略。

什么是事件冒泡和捕获

事件冒泡和捕获是JS中处理事件的两种机制。

当一个元素上发生了事件时，如果该元素定义了事件处理函数，那么这个事件会先按照捕获的顺序从父元素一直传递到子元素，再由子元素向上冒泡直到父元素。

事件冒泡

当一个元素上发生事件时，它会把这个事件交给它的父元素处理，父元素再把这个事件交给自己的父元素，一直到整个文档的根节点（window对象）。

事件冒泡是从子元素往父元素冒泡。

事件捕获

与事件冒泡相反的是，事件捕获从顶层节点把事件逐级传递到某一个节点，然后再转向目标节点，最后到达事件目标。

事件捕获是从父元素向子元素传递事件。

两者区别

事件处理程序先经历捕获过程，然后才到目标元素，最后才是冒泡过程，这种过程也被称为事件的传播。

区别就在于传播的顺序不同：事件捕获的顺序是从上到下，而事件冒泡是从下到上。

代码示例

下面为一个捕获和冒泡事件的代码示例：

<div id="outer">
  <div id="inner"></div>
</div>

document.getElementById('inner').addEventListener('click', function () {
    console.log('inner');
}, false); // 冒泡模式


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

点击inner元素时，控制台输出顺序如下：

1. inner
2. outer

因为inner元素只指定了事件的冒泡模式，所以inner的点击事件冒泡到outer元素上再由outer元素触发。

下面我们将代码改为使用事件捕获模式：

document.getElementById('inner').addEventListener('click', function () {
    console.log('inner');
}, true); // 捕获模式


document.getElementById('outer').addEventListener('click', function () {
    console.log('outer');
}, true); // 捕获模式

点击inner元素时，控制台输出顺序如下：

1. outer
2. inner

因为inner元素和outer元素都指定了事件的捕获模式，所以inner的点击事件首先被outer元素捕获，然后再由inner元素触发。

总结来说，事件的传播有两种模式：捕获模式和冒泡模式，通过设置元素的addEventListener函数的第三个参数，可以指定事件的传播模式。