10. addEventListener 参数有哪些

总结

1. el.addEventListener(type, listener, useCapture)
2. el：事件对象
3. type：事件类型
4. listener：事件处理函数
5. useCapture：布尔或对象，布尔时 false 为冒泡，true 为捕获。对象时，{ captrue: false, once: false, passive: false }

addEventListener 是用于为元素绑定事件监听器的标准方法，支持更灵活的事件处理方式，包括捕获、冒泡、一次性执行等。

一、基本语法

target.addEventListener(type, listener, options);

或：

target.addEventListener(type, listener, useCapture);

二、参数详解

1. type（必填）

• 类型：字符串（String）
• 说明：要监听的事件类型，如 'click'、'mouseover'、'keydown' 等。

element.addEventListener("click", function () {
  console.log("Clicked!");
});

2. listener（必填）

• 类型：函数（Function）
• 说明：当指定事件发生时被调用的回调函数。
• 回调函数接收一个参数（Event 对象），包含事件相关信息。

element.addEventListener("scroll", function (event) {
  console.log("Scroll event:", event);
});

3. options / useCapture（可选）

情况一：作为布尔值 (useCapture)

• 默认值：false
• 作用：设置事件是在捕获阶段还是冒泡阶段触发。

element.addEventListener("click", handler, true); // 捕获阶段
element.addEventListener("click", handler, false); // 冒泡阶段（默认）

情况二：作为对象 (options)

• 可以传递一个对象，提供更多配置选项：

element.addEventListener("click", handler, {
  capture: false, // 是否在捕获阶段触发
  once: true, // 是否只执行一次（自动解绑）
  passive: true, // 表示 listener 不会调用 preventDefault()
});

属性说明：

✅ 使用 passive: true 可提升页面滚动等操作的性能，尤其在移动端。

三、兼容性注意事项

• options 对象参数在现代浏览器中广泛支持（Chrome 49+、Firefox 49+、Edge 17+ 等）。
• 如果需要兼容旧版本浏览器（如 IE），建议使用布尔值形式。

四、常用场景示例

示例 1：只执行一次的事件监听器

element.addEventListener("click", handler, { once: true });

示例 2：捕获阶段监听事件

element.addEventListener("click", handler, { capture: true });

示例 3：优化滚动性能

element.addEventListener("touchstart", onTouchStart, { passive: true });

五、总结

📌 推荐使用对象形式的 options 参数，可以更好地控制事件行为并提升性能。