面试题：JavaScript 中如何创建并触发一个自定义事件

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>自定义事件</title>
</head>

<body>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 创建自定义事件
      const myEvent = new CustomEvent('myCustomEvent', {
        detail: {
          message: '这是自定义事件携带的数据'
        }
      });

      // 为自定义事件添加监听器
      document.addEventListener('myCustomEvent', function (event) {
        console.log('自定义事件被触发，携带的数据为：', event.detail);
      });

      // 触发自定义事件
      document.dispatchEvent(myEvent);
    });
  </script>
</body>

</html>

上述代码中：

document.addEventListener('DOMContentLoaded', function () {... }) 确保页面加载完成后执行内部代码。
new CustomEvent('myCustomEvent', {... }) 创建了一个名为 myCustomEvent 的自定义事件，并可以携带一些数据（这里放在 detail 中）。
document.addEventListener('myCustomEvent', function (event) {... }) 为自定义事件添加监听器，当事件触发时，在控制台输出事件携带的数据。
document.dispatchEvent(myEvent) 触发自定义事件。

面试题：JavaScript 中如何创建并触发一个自定义事件

知识考点

面试题答案