JavaScript 自定义事件

在 JavaScript 中，自定义事件是一种允许开发人员定义并触发自己的事件的机制。通常情况下，浏览器或其他环境提供了一系列预定义事件，例如点击、鼠标移动、键盘输入等，但有时候这些预定义事件并不能完全满足我们的需求。

创建自定义事件

在 JavaScript 中，可以使用 CustomEvent 构造函数来创建自定义事件。其语法如下：

const myEvent = new CustomEvent(eventType, options);

其中，eventType 表示事件的类型，可以是任意字符串，options 是一个可选的配置对象。一般情况下，我们只需要设置 bubbles 属性来指示该事件是否冒泡即可。默认为 false。

例如，创建一个自定义事件类型为 myEvent，并指示该事件可以冒泡：

const myEvent = new CustomEvent('myEvent', { bubbles: true });

触发自定义事件

创建自定义事件之后，可以通过以下代码来触发它：

element.dispatchEvent(myEvent);

其中，element 是一个 DOM 元素对象，表示要触发事件的元素。

例如，假设我们有一个按钮元素，并已经创建了一个自定义事件 myEvent，那么可以通过以下代码来触发它：

const button = document.querySelector('button');
button.dispatchEvent(myEvent);

捕获自定义事件

当一个自定义事件被触发时，可以使用以下代码来捕获它：

element.addEventListener(eventType, eventHandler);

其中，element 是一个 DOM 元素对象，表示要捕获事件的元素，eventType 是事件的类型，可以是任何字符串，eventHandler 是一个函数，当事件被触发时会被调用。

例如，假设我们已经触发了一个名为 myEvent 的自定义事件，并希望能够监听它的触发事件，那么可以通过以下代码来捕获它：

const element = document.querySelector('div');
element.addEventListener('myEvent', event => {
  console.log('myEvent triggered!');
});

示例

以下是一个完整的示例，它主要实现了一个自定义计数器组件，当用户点击组件时，会触发一个自定义事件，并将计数器的值加 1。同时，该组件还提供了一个 count 属性，表示当前的计数器值。

class Counter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    this.count++;
    const event = new CustomEvent('countChange', {
      bubbles: true,
      detail: { count: this.count }
    });
    this.dispatchEvent(event);
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <style>
        :host {
          display: inline-block;
          padding: 5px 10px;
          border: 1px solid #ccc;
          cursor: pointer;
        }
      </style>
      <span>${this.count}</span>
    `;
  }
}

customElements.define('my-counter', Counter);

const counter = document.querySelector('my-counter');
counter.addEventListener('countChange', event => {
  console.log(`count changed: ${event.detail.count}`);
});

在 HTML 中，可以通过以下代码来使用该组件：

<my-counter></my-counter>

当用户点击计数器时，会触发一个名为 countChange 的自定义事件，并打印出当前的计数器值。