JS `EventTarget` 与 `CustomEvent`：构建可扩展的自定义事件系统

各位观众老爷，大家好！今天咱就来聊聊 JavaScript 里这对儿黄金搭档：EventTarget 和 CustomEvent。这对儿哥俩可是构建可扩展自定义事件系统的利器，能让你的代码像乐高积木一样，想怎么搭就怎么搭，灵活得不要不要的。准备好了吗？咱们这就开讲！

一、事件是个啥？（Event Basics）

在 JavaScript 的世界里，事件就像是“信号”，代表着发生了什么事情。比如说，用户点击了一下按钮，鼠标移到了某个元素上，或者网页加载完成了，这些都是事件。

浏览器内置了很多事件，比如 click、mouseover、load 等等。但是，有时候这些内置的事件不够用，我们需要自定义事件来满足特殊的需求。这就轮到 EventTarget 和 CustomEvent 出场了。

二、EventTarget：事件的“发射器”和“接收器”

EventTarget 是一个接口，它定义了事件的监听、触发和移除的基本方法。简单来说，就是谁想发射事件，谁想接收事件，都得跟 EventTarget 搭上关系。

EventTarget 提供了三个核心方法：

• addEventListener(type, listener, options): 监听事件，当指定类型的事件发生时，执行相应的回调函数（listener）。

  • type: 事件类型（字符串）。比如 "my-custom-event"。
  • listener: 事件处理函数，当事件发生时被调用。
  • options: 可选参数，用于配置事件监听的行为。可以是一个对象，包含以下属性：
    • capture: 布尔值，指定事件是否在捕获阶段触发。
    • once: 布尔值，指定事件处理函数是否只执行一次。
    • passive: 布尔值，指定事件处理函数是否会调用 preventDefault()。

• removeEventListener(type, listener, options): 移除事件监听器。

  • 参数与 addEventListener 对应，确保移除的是同一个监听器。

• dispatchEvent(event): 触发事件。

  • event: 一个 Event 对象，表示要触发的事件。

代码示例：

// 创建一个 EventTarget 实例
const myEmitter = new EventTarget();

// 定义一个事件处理函数
function handleMyEvent(event) {
  console.log("事件触发了！", event.detail); // event.detail 包含了自定义事件的数据
}

// 监听事件
myEmitter.addEventListener("my-custom-event", handleMyEvent);

// 创建一个 CustomEvent 实例
const myEvent = new CustomEvent("my-custom-event", {
  detail: { message: "Hello, world!" }, // 自定义事件的数据
});

// 触发事件
myEmitter.dispatchEvent(myEvent); // 控制台会输出 "事件触发了！ {message: 'Hello, world!'}"

// 移除事件监听器
myEmitter.removeEventListener("my-custom-event", handleMyEvent);

// 再次触发事件，这次不会有任何输出
myEmitter.dispatchEvent(myEvent);

三、CustomEvent：自定义事件的“身份证”

CustomEvent 是 Event 的一个子类，专门用于创建自定义事件。它允许我们携带额外的数据（通过 detail 属性）一起触发事件。

CustomEvent 的构造函数：

• CustomEvent(type, options):
  • type: 事件类型（字符串）。
  • options: 可选参数，用于配置事件。可以包含以下属性：
    • detail: 任意类型的数据，作为事件的附加信息。
    • bubbles: 布尔值，指定事件是否冒泡（默认为 false）。
    • cancelable: 布尔值，指定事件是否可以取消（默认为 false）。

代码示例：

// 创建一个 CustomEvent 实例，携带数据
const myEvent = new CustomEvent("data-updated", {
  detail: { newData: "这是一个新的数据" },
  bubbles: true, // 允许事件冒泡
  cancelable: true, // 允许事件被取消
});

// 监听事件的元素
const myElement = document.getElementById("myElement");

// 事件处理函数
myElement.addEventListener("data-updated", function(event) {
  console.log("数据更新了：", event.detail.newData);
  // 可以使用 event.preventDefault() 取消事件的默认行为
  // event.preventDefault();
});

// 触发事件
myElement.dispatchEvent(myEvent);

四、构建可扩展的自定义事件系统

有了 EventTarget 和 CustomEvent，我们就可以构建自己的事件系统了。这在组件开发、模块化编程中非常有用。

步骤：

1. 创建一个类或对象，继承或包含 EventTarget。 这样，这个类或对象就拥有了事件监听、触发和移除的能力。
2. 定义自定义事件的类型。 这些事件类型应该是描述性的，能够清晰地表达事件的含义。
3. 在适当的时机，创建 CustomEvent 实例并触发事件。 在创建 CustomEvent 时，可以携带额外的数据，方便事件处理函数进行处理。
4. 在需要监听事件的地方，使用 addEventListener 监听事件。 在事件处理函数中，可以访问 event.detail 属性获取自定义事件的数据。

代码示例：

// 创建一个自定义的组件类
class MyComponent extends EventTarget {
  constructor(name) {
    super();
    this.name = name;
    this.data = null;
  }

  setData(newData) {
    this.data = newData;
    // 触发 "data-changed" 事件
    const event = new CustomEvent("data-changed", {
      detail: { data: this.data },
    });
    this.dispatchEvent(event);
  }

  getName() {
    return this.name;
  }
}

// 创建组件实例
const component = new MyComponent("My Awesome Component");

// 监听 "data-changed" 事件
component.addEventListener("data-changed", function(event) {
  console.log("组件数据变化了：", event.detail.data);
});

// 设置组件数据，触发事件
component.setData({ message: "Hello from the component!" }); // 控制台输出 "组件数据变化了： {message: 'Hello from the component!'}"

console.log(component.getName()); // 输出 "My Awesome Component"

五、进阶用法：事件冒泡和取消

• 事件冒泡 (Bubbling): 当一个元素上的事件被触发后，这个事件会沿着 DOM 树向上冒泡，依次触发父元素、祖父元素等上的相同事件监听器。CustomEvent 的 bubbles 属性控制事件是否冒泡。
• 事件取消 (Cancellation): 通过调用 event.preventDefault() 方法，可以取消事件的默认行为。CustomEvent 的 cancelable 属性控制事件是否可以被取消。

代码示例：

<div id="parent">
  <button id="child">Click Me</button>
</div>

<script>
  const parent = document.getElementById("parent");
  const child = document.getElementById("child");

  // 监听父元素上的 click 事件
  parent.addEventListener("click", function(event) {
    console.log("Parent clicked!");
  });

  // 监听子元素上的 click 事件
  child.addEventListener("click", function(event) {
    console.log("Child clicked!");
  });

  // 创建一个 CustomEvent 实例，并触发事件
  const customClickEvent = new CustomEvent("click", {
    bubbles: true, // 允许事件冒泡
    cancelable: true, // 允许事件被取消
  });

  child.addEventListener("click", function(event) {
    // 阻止事件继续冒泡到父元素
    // event.stopPropagation();

    // 取消事件的默认行为（例如，阻止链接跳转）
    // event.preventDefault();
  });

  // 触发事件
  child.dispatchEvent(customClickEvent);
</script>

在这个例子中，如果 bubbles 为 true，点击子元素时，会先触发子元素上的 click 事件，然后冒泡到父元素，触发父元素上的 click 事件。如果 bubbles 为 false，则只会触发子元素上的 click 事件。event.stopPropagation()可以阻止事件冒泡。

六、注意事项和最佳实践

• 事件命名： 自定义事件的名称应该具有描述性，使用小写字母和连字符（-）分隔单词，例如 data-updated、user-logged-in。
• 数据传递： 使用 detail 属性传递自定义事件的数据，确保数据的结构清晰、易于理解。
• 事件冒泡： 根据实际需求，决定是否需要启用事件冒泡。如果不需要冒泡，可以将 bubbles 属性设置为 false。
• 事件取消： 谨慎使用 event.preventDefault() 方法，因为它会取消事件的默认行为，可能会影响用户的交互体验。
• 内存管理： 及时移除不再需要的事件监听器，避免内存泄漏。
• 不要滥用自定义事件: 只有在浏览器原生事件无法满足需求时才考虑使用自定义事件。

七、EventTarget的兼容性

EventTarget 是一个现代 Web API，在现代浏览器中支持良好，包括 Chrome, Firefox, Safari 和 Edge。对于老旧浏览器，可能需要使用 polyfill 来提供支持。

总结

EventTarget 和 CustomEvent 就像一对好基友，能够帮助我们构建灵活、可扩展的自定义事件系统。掌握了它们，你的代码就能像变形金刚一样，适应各种复杂的场景，让你成为代码界的 Super Hero！

希望今天的讲座对大家有所帮助，咱们下次再见！如果觉得讲得还行，点个赞再走呗！