JavaScript事件流：深入理解事件处理和传播机制

在JavaScript中，事件流描述的是从页面接收事件的顺序。事件流被分为两种：“捕获”和“冒泡”。

1. 捕获阶段：事件从最外层开始，逐层向内传播，直至目标元素。
2. 目标阶段：事件在目标元素上触发。
3. 冒泡阶段：事件从目标元素开始，向外逐层传播，最终到达最外层。

在DOM2级事件规范中，可以使用addEventListener函数来指定事件处理程序，第三个参数如果为true则表示在捕获阶段处理事件，如果为false则表示在冒泡阶段处理事件。

例子代码：

// 获取元素
var parent = document.getElementById('parent');
var child = document.getElementById('child');
 
// 添加事件监听器
parent.addEventListener('click', function() {
    console.log('父元素捕获阶段');
}, true);
 
child.addEventListener('click', function(e) {
    console.log('子元素目标阶段');
    e.stopPropagation(); // 阻止冒泡
}, true);
 
parent.addEventListener('click', function() {
    console.log('父元素冒泡阶段');
}, false);

在上述代码中，点击child元素时，会先打印“父元素捕获阶段”，然后打印“子元素目标阶段”，通过调用e.stopPropagation()阻止事件继续冒泡。最后在冒泡回到parent时，打印“父元素冒泡阶段”。