如何创建 JavaScript 自定义事件

下面是如何创建 JavaScript 自定义事件的完整攻略：

什么是 JavaScript 自定义事件

JavaScript 自定义事件是一种由开发者自行定义并触发的事件类型，可以在任何时候和地点触发，用于实现更加灵活的交互功能。

创建 JavaScript 自定义事件的步骤

1. 定义事件类型

首先我们需要定义一个事件类型，可以通过 new Event() 构造函数来创建一个新的事件对象。可以指定事件的名称、是否可以冒泡、是否可以取消默认行为等属性。

const myEvent = new Event('my-event', {
  bubbles: true,
  cancelable: true
});

2. 注册事件监听器

接下来需要注册一个事件监听器来处理该事件的触发，可以使用 addEventListener() 方法注册。

const myElement = document.querySelector('#my-element');
myElement.addEventListener('my-event', (event) => {
  console.log('my-event triggered!');
});

3. 触发事件

最后通过 dispatchEvent() 方法来触发该自定义事件。

myElement.dispatchEvent(myEvent);

示例说明

示例一

下面示例创建一个按钮，当点击按钮时，触发自定义的 my-event 事件。

<button id="my-button">点击我触发自定义事件</button>

const myButton = document.querySelector('#my-button');
const myEvent = new Event('my-event', {
  bubbles: true,
  cancelable: true
});

myButton.addEventListener('click', () => {
  myButton.dispatchEvent(myEvent);
});

myButton.addEventListener('my-event', (event) => {
  console.log('my-event triggered!');
});

示例二

下面示例定义一个新的 MyEvent 类，继承自 Event，并添加了额外的属性和方法，用于传递更多的信息。

class MyEvent extends Event {
  constructor(data) {
    super('my-event', {
      bubbles: true,
      cancelable: true
    });
    this.data = data;
  }
  getData() {
    return this.data;
  }
}

const myElement = document.querySelector('#my-element');
const myEvent = new MyEvent('hello world!');

myElement.addEventListener('my-event', (event) => {
  console.log(event.getData()); // 输出 "hello world!"
});

myElement.dispatchEvent(myEvent);

以上就是建立JavaScript自定义事件的完整过程。