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

JavaScript 事件模型主要包括两个阶段：事件捕获（Capturing）和事件冒泡（Bubbling）。

事件捕获：

事件从最外层开始，逐层向内传播，直至目标元素。

事件冒泡：

事件从目标元素开始，向外传播，直至最外层。

在 DOM 级别 3 的标准中，你可以指定事件监听器函数在捕获阶段还是在冒泡阶段被触发。默认情况下，事件监听器是在冒泡阶段被触发的。

例子代码：

// 获取元素
var parent = document.getElementById('parent');
var child = document.getElementById('child');
 
// 添加事件监听器
// 捕获阶段触发
parent.addEventListener('click', function() {
  console.log('parent capture');
}, true);
 
// 冒泡阶段触发
child.addEventListener('click', function() {
  console.log('child bubble');
}, false);
 
// 输出顺序将会是：
// parent capture
// child bubble

在这个例子中，有两个元素：一个父元素 #parent 和一个子元素 #child。我们为它们各自添加了事件监听器。在父元素的监听器中，我们设置了第三个参数为 true，表示它在捕获阶段触发。在子元素的监听器中，我们设置了第三个参数为 false，默认值，表示它在冒泡阶段触发。当你点击子元素时，捕获阶段的监听器首先被触发，然后冒泡阶段的监听器被触发。