addEventListener 的三个参数分别是事件类型字符串、事件处理函数（或含handleEvent的对象）、可选配置对象（或布尔值），其中第三个参数控制捕获/冒泡、一次性执行、被动模式等关键行为。

addEventListener 是 JavaScript 中最常用的事件绑定方法，它有三个参数：事件类型、事件处理函数、可选配置对象（或布尔值）。其中第三个参数最容易被忽略，但恰恰决定了事件的执行时机、是否捕获、能否移除等关键行为。

第一个参数：事件类型（字符串）

必须是合法的事件名，不带 on 前缀。比如 "click"、"input"、"keydown"，而不是 "onclick" 或 "oninput"。大小写敏感，推荐全小写。部分自定义事件也适用，如 "my-custom-event"。

第二个参数：事件处理函数（Function 或 对象）

通常传入一个函数，该函数会在事件触发时执行，自动接收一个 Event 对象作为参数。也可以传入一个带有 handleEvent 方法的对象，此时该对象会作为事件处理器被调用。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

• 函数形式：element.addEventListener("click", function(e) { console.log(e.target); });
• 箭头函数可用，但注意 this 指向问题（默认指向外层作用域，不是当前元素）
• 推荐使用具名函数或绑定后的函数，便于后续用 removeEventListener 精确移除

第三个参数：选项（Object 或 Boolean）

这个参数决定事件监听的高级行为。早期只支持布尔值，现在推荐使用对象字面量，更清晰、可扩展。

• Boolean 值：若为 true，表示在捕获阶段触发；false（默认）表示在冒泡阶段触发
• Object 形式（推荐）：
  • capture: true/false —— 是否在捕获阶段监听（等价于旧布尔参数）
  • once: true —— 事件触发一次后自动移除监听器
  • passive: true —— 告诉浏览器该监听器不会调用 preventDefault()（常用于 touchstart、wheel 提升滚动性能）
  • signal: AbortSignal —— 绑定到 AbortController，方便统一取消多个监听器

常见易错点提醒

传入匿名函数后无法用 removeEventListener 移除，因为引用不一致；passive: true 时再调用 e.preventDefault() 会报错；once: true 和 capture: true 可以同时使用；对象参数中未声明的属性会被忽略，不会报错。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南