DOM 事件机制入门：捕获、冒泡和事件委托到底该怎么理解

2021-11-21

0 阅读

前端开发

前端开发里，事件是最基础也最常见的能力之一。

点击按钮、输入内容、提交表单、滚动页面，这些交互的背后其实都离不开事件机制。

实际开发中大家会直接使用事件，但一旦遇到下面这些情况，就会发现自己其实并没有真正理解它：

为什么点击子元素时父元素的事件也触发了
为什么有些事件监听加在父级上也能生效
为什么 stopPropagation 有时能解决问题，有时又不够

这些问题都和 DOM 事件机制有关。

什么是事件传播

当你点击一个页面元素时，浏览器并不是只把这次点击交给当前元素处理。

它会沿着 DOM 树进行一轮传播，这个传播过程通常分成三个阶段：

捕获阶段
目标阶段
冒泡阶段

简单理解就是，事件会先从外往里走，再从里往外走。

冒泡为什么这么重要

在日常开发中，最常遇到的通常是冒泡。

例如：

1parent.addEventListener('click', () => {
2  console.log('parent clicked');
3});
4
5child.addEventListener('click', () => {
6  console.log('child clicked');
7});

当点击子元素时，通常会先触发子元素，再触发父元素。这就是冒泡。

理解这一点很重要，因为很多交互问题其实不是“事件绑错了”，而是没有意识到事件还会继续向上传播。

捕获阶段什么时候会用到

捕获阶段在业务开发里不像冒泡那样常见，但它确实存在。

如果你通过第三个参数或配置项启用捕获监听，事件会先在外层元素触发，再到目标元素。

1parent.addEventListener(
2  'click',
3  () => {
4    console.log('capture');
5  },
6  true
7);

大多数场景下你不一定主动用它，但知道它的存在，能帮助你更好理解事件执行顺序。

什么是事件委托

事件委托是前端里非常实用的一种技巧。

它的思路是：不把事件直接绑定在每个子元素上，而是绑定在它们的父元素上，再通过事件对象判断具体是哪个子元素触发的。

例如列表：

1list.addEventListener('click', (event) => {
2  if (event.target.matches('li')) {
3    console.log('clicked item');
4  }
5});

这样做的好处很明显：

减少重复绑定
动态新增元素也能响应
结构更集中

stopPropagation 是做什么的

如果你不希望事件继续向上传播，可以调用：

1event.stopPropagation();

这通常用于阻止父级事件误触发。

例如一个卡片整体可点击，卡片内部又有删除按钮，这时删除按钮点击后如果不阻止传播，卡片点击逻辑也可能被触发。

事件对象里最常用的几个属性

日常开发中比较常见的有：

target
currentTarget
preventDefault

其中最容易混的是：

event.target 表示实际触发事件的元素
event.currentTarget 表示当前正在处理事件的元素

理解这两个区别，对写事件委托特别重要。

默认行为和传播不是一回事

很多人刚开始会把这两个概念混在一起。

例如点击链接时：

阻止跳转，要用 preventDefault
阻止事件继续向父级传播，要用 stopPropagation

它们解决的是两类不同问题。

写在最后

DOM 事件机制最重要的，不是死记捕获和冒泡的定义，而是理解事件在页面中的传播路径。

只要把事件传播、事件委托、默认行为和当前目标这几个概念理顺，很多日常交互问题都会更容易分析。事件机制看起来基础，但它几乎贯穿了整个前端交互开发。