概述
JavaScript事件流是描述事件在DOM结构中传播过程的机制。
什么是事件流？
事件流指的是当HTML元素发生某个事件时，该事件在DOM节点之间传播的路径。这个过程主要分为三个阶段：
捕获阶段：事件从window对象向下传播至目标元素
目标阶段：事件到达目标元素
冒泡阶段：事件从目标元素向上冒泡至window对象
这个过程就像一颗石子投入水中：
捕获：石子从水面下沉到触达水底目标（从上到下）。
冒泡：触达目标后，气泡从水底升到水面（从下到上）。
这种设计源于浏览器早期两家公司的不同理念：网景主张事件捕获，微软主张事件冒泡。最终W3C制定了统一标准，同时支持两种传播方式。
事件流模型示例
当点击内部元素时，控制台将输出：
捕获阶段：外部元素
目标元素
冒泡阶段：外部元素
事件流的应用场景
事件委托
事件委托是事件流最重要的应用之一，它利用事件冒泡机制，将子元素的事件处理委托给父元素处理。
传统方式的问题：
// 为每个列表项添加点击事件
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('click', function() {
console.log('点击了项目:', this.textContent);
});
});
// 动态添加新项目时，新项目没有事件处理
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目没有点击事件！
使用事件委托的解决方案：
// 将事件处理委托给父元素
document.querySelector('.list').addEventListener('click', function(e) {
if (e.target.classList.contains('item')) {
console.log('点击了项目:', e.target.textContent);
}
});
// 现在动态添加的项目也会自动拥有点击事件
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目也有点击事件！
事件委托的优势：
减少内存消耗（只需一个事件处理程序）
动态添加的元素自动拥有事件处理
代码更简洁易维护
阻止事件传播
在某些情况下，我们需要控制事件的传播行为：
// 阻止事件冒泡
element.addEventListener('click', function(e) {
e.stopPropagation();
// 现在事件不会继续向上冒泡
});
// 阻止默认行为
link.addEventListener('click', function(e) {
e.preventDefault();
// 现在链接不会跳转
});
// 同时阻止冒泡和默认行为
element.addEventListener('click', function(e) {
e.stopImmediatePropagation();
// 阻止事件传播并阻止同一元素上的其他处理程序执行
});
自定义事件
利用事件流机制，我们可以创建和派发自定义事件：
// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
detail: { message: '这是自定义数据' },
bubbles: true, // 事件是否冒泡
cancelable: true // 事件能否被取消
});
// 监听自定义事件
element.addEventListener('myEvent', function(e) {
console.log('收到自定义事件:', e.detail.message);
});
// 派发事件
element.dispatchEvent(customEvent);
实际案例分析
如下按钮配合框架写法将更加简介
模态框实现
利用事件流实现点击模态框外部关闭功能：
class Modal {
constructor(element) {
this.modal = element;
this.isOpen = false;
// 点击模态框内部阻止事件冒泡
this.modal.addEventListener('click', (e) => {
e.stopPropagation();
});
// 点击外部关闭模态框
document.addEventListener('click', () => {
if (this.isOpen) {
this.close();
}
});
}
open() {
this.modal.style.display = 'block';
this.isOpen = true;
}
close() {
this.modal.style.display = 'none';
this.isOpen = false;
}
}
下拉菜单实现
class Dropdown {
constructor(menuElement) {
this.menu = menuElement;
this.button = menuElement.querySelector('.dropdown-button');
this.content = menuElement.querySelector('.dropdown-content');
this.isOpen = false;
// 点击按钮切换菜单
this.button.addEventListener('click', (e) => {
e.stopPropagation();
this.toggle();
});
// 点击文档其他区域关闭菜单
document.addEventListener('click', () => {
if (this.isOpen) {
this.close();
}
});
}
toggle() {
if (this.isOpen) {
this.close();
} else {
this.open();
}
}
open() {
this.content.style.display = 'block';
this.isOpen = true;
}
close() {
this.content.style.display = 'none';
this.isOpen = false;
}
}
总结与对比
特性事件冒泡事件捕获传播方向从目标元素向上传播到根节点从根节点向下传播到目标元素默认阶段addEventListener 的默认监听阶段（第三个参数为 false 或未设置）需要显式设置（第三个参数为 true 或 {capture: true}）主要应用事件委托，处理动态内容，优化性能较少使用，可在事件到达目标前进行拦截或处理