EventTarget

[TOC]

索引

方法：

eventTarget.addEventListener()：(type, listener, options? | useCapture?)，用于为 DOM 元素绑定事件监听器的核心方法，支持精细控制事件触发的阶段、频率及生命周期。
eventTarget.removeEventListener()：(type, listener, options? | useCapture?)，用于移除通过 addEventListener 绑定的事件监听器的方法。正确使用它可以避免内存泄漏和重复事件触发问题。
eventTarget.dispatchEvent()：(event)，用于手动触发自定义或原生事件的方法。

EventTarget

方法

new EventTarget()【

addEventListener()

eventTarget.addEventListener()：(type, listener, options? | useCapture?)，用于为 DOM 元素绑定事件监听器的核心方法，支持精细控制事件触发的阶段、频率及生命周期。

type：string，指定事件类型，如click、keydown、custom-event。
listener：(e)=>void | EventListener，事件触发时调用的函数，接收 Event 对象作为参数。
useCapture?：boolean，默认：false，控制事件触发阶段。
- true：在捕获阶段触发监听器。
- false：在冒泡阶段触发监听器。
options?：{capture?,once?,passive?,signal?}，配置对象。
- capture?：boolean，默认：false，同 useCapture，控制事件触发阶段。
- once?：boolean，默认：false，为true时监听器仅触发一次后自动移除。
- passive?：boolean，默认：false，为true时监听器不会调用 preventDefault()，优化滚动性能。
- signal?：AbortSignal，通过 AbortController 控制监听器的生命周期（移除监听器）。

示例：

const button = document.querySelector("button");

function handleClick(event) {
  console.log('事件类型：', e.type); // 输出 "click"
  console.log('触发元素：', e.target); // 按钮元素
}

// 1. 基础用法：绑定点击事件
button.addEventListener("click", handleClick);

// 2. 配置选项：一次性事件
button.addEventListener("click", handleClick, { once: true }); // 点击一次后，监听器自动移除

// 3. 优化滚动性能（passive: true）
window.addEventListener("scroll", handleScroll, { passive: true }); // 避免阻塞滚动，提升流畅性（尤其移动端）

// 4. 捕获阶段触发事件
document.addEventListener("click", handleCaptureClick, { capture: true }); // 在事件捕获阶段处理点击

removeEventListener()

eventTarget.removeEventListener()：(type, listener, options? | useCapture?)，用于移除通过 addEventListener 绑定的事件监听器的方法。正确使用它可以避免内存泄漏和重复事件触发问题。

type：string，指定事件类型，如click、keydown、custom-event。
listener：(e)=>void | EventListener，事件触发时调用的函数，接收 Event 对象作为参数。
useCapture?：boolean，默认：false，控制事件触发阶段。
- true：在捕获阶段触发监听器。
- false：在冒泡阶段触发监听器。
options?：{capture?,once?,passive?,signal?}，配置对象。
- capture?：boolean，默认：false，同 useCapture，控制事件触发阶段。
- once?：boolean，默认：false，为true时监听器仅触发一次后自动移除。
- passive?：boolean，默认：false，为true时监听器不会调用 preventDefault()，优化滚动性能。
- signal?：AbortSignal，通过 AbortController 控制监听器的生命周期（移除监听器）。
注意：
- 参数必须完全匹配：移除监听器的参数需与添加时的参数严格一致，否则无法成功移除。
- 匿名函数无法移除：匿名函数无法通过 removeEventListener 移除（因引用不一致）。

示例：

基础用法

// 5. 移除事件
button.removeEventListener("click", handleClick);

通过 AbortController 移除事件

const controller = new AbortController();

button.addEventListener("click", handleClick, {
  signal: controller.signal
});

// 移除所有通过此 signal 绑定的事件
controller.abort();

dispatchEvent()

eventTarget.dispatchEvent()：(event)，用于手动触发自定义或原生事件的方法。

event：Event，要触发的事件实例（如 Event、CustomEvent 或其子类）。
返回：
isCancelled：boolean，事件是否被取消了（是否调用了event.preventDefault()）。

示例：

触发自定义事件并传递数据

html

<div id="status">等待操作...</div>

<script>
  const div = document.getElementById("status");

  // 绑定自定义事件监听器
  div.addEventListener("update-status", (e) => {
    div.textContent = `状态：${e.detail.message}`;
  });

  // 创建并触发自定义事件
  const event = new CustomEvent("update-status", {
    detail: { message: "操作成功！" }
  });
  div.dispatchEvent(event);
</script>

模拟原生点击事件

html

<button id="btn">点击</button>

<script>
  const button = document.getElementById("btn");

  button.addEventListener("click", () => {
    console.log("按钮被点击（模拟）");
  });

  // 创建并触发点击事件
  const clickEvent = new Event("click");
  button.dispatchEvent(clickEvent);
</script>

EventTarget ​

索引 ​

EventTarget ​

方法 ​

new EventTarget()【 ​

addEventListener() ​

removeEventListener() ​

dispatchEvent() ​

EventTarget

索引

EventTarget

方法

new EventTarget()【

addEventListener()

removeEventListener()

dispatchEvent()