深入解析 addEventListener 的高级配置：从基础到 Vue3 实践

type

status

date

slug

summary

前言

在 JavaScript 事件处理中，addEventListener 的第三个参数 options 提供了强大的控制能力。本文将解析现代浏览器支持的四个核心配置参数：capture、once、passive 和 signal，通过实际场景示例展示它们的妙用。

一、capture：控制事件触发阶段

作用原理

实际场景

多层级菜单的优先级处理 当需要父元素先于子元素处理点击事件时：

输出顺序：工具栏捕获点击 → 按钮点击

二、once：一次性事件监听

使用场景

表单提交防重复

三、passive：性能优化利器

原理与效果

四、signal：精准控制监听周期

结合 AbortController 使用

典型应用场景

页面跳转时自动清理事件

组件销毁时移除相关监听

条件性停止事件处理（如：游戏结束）

综合应用示例

实现高性能无限滚动

参数兼容性参考表

参数	Chrome	Firefox	Safari	Edge
capture	49+	49+	10+	16+
once	55+	50+	10+	16+
passive	51+	49+	10+	16+
signal	86+	98+	15.4+	86+

最佳实践建议

优先使用对象参数：提高代码可读性

善用 passive 优化：特别是 touch 和 wheel 事件

及时清理监听：结合 once 和 signal 防止内存泄漏

渐进增强：为不支持新特性的浏览器提供降级方案

一、Vue3 中访问原生事件参数

在模板中直接使用

组合式API中访问事件

二、Vue3 特有事件处理技巧

1. 事件修饰符与配置参数映射

Vue 修饰符	等效配置参数
`.capture`	`{ capture: true }`
`.once`	`{ once: true }`
`.passive`	`{ passive: true }`

2. 自动清理的事件监听

三、性能优化实战

1. 滚动性能优化

2. 一次性表单提交

四、高级模式：动态事件管理

1. 条件式事件监听

2. 组件间事件传递优化

五、Vue3 事件系统最佳实践

优先使用Vue原生修饰符

对于简单场景，优先使用 .once、.passive 等内置修饰符

组合式API管理复杂监听

使用 onMounted + onUnmounted 生命周期钩子确保资源清理

响应式事件控制

结合 watch 和 AbortController 实现动态事件管理

性能关键路径使用 passive

对 touch、wheel、scroll 等事件始终添加 { passive: true }

自定义事件传播控制

利用 capture 参数处理跨组件的事件优先级问题

前言