(js 自定义事件) 详解如何在JavaScript中自定义事件自定义事件在 JavaScript 中主要通过 Event() 和 CustomEvent() 构造函数来创建全网首发(图文详解1)

(js 自定义事件) 详解如何在JavaScript中自定义事件

在JavaScript中自定义事件主要是通过JS原生的Event()构造函数和CustomEvent() 构造函数来创建。

Event()构造函数实例：

语法：let myEvent = new Event(typeArg, eventInit);
参数：
- typeArg：DOMString 类型，表示创建事件的名称；
- eventInit：可选配置项，包括：
  - bubbles：表示该事件是否冒泡。可选Boolean，默认为false;
  - cancelable：表示该事件能否被取消。可选Boolean，默认为false;
  - composed：指示事件是否会在影子DOM根节点之外触发侦听器。可选Boolean，默认为false;

CustomEvent()构造函数实例：

语法：let myEvent = new CustomEvent(typeArg, eventInit);
参数：
typeArg：DOMString 类型，表示创建事件的名称；
- eventInit：可选配置项，包括：
  - detail：表示该事件中需要被传递的数据，在 EventListener 获取。可选Any，默认为null；
  - bubbles：表示该事件是否冒泡。可选Boolean，默认为false;
  - cancelable：表示该事件能否被取消。可选Boolean，默认为false;

使用示例：

// 创建事件
let myEvent = new CustomEvent("pingan", {
  detail: { name: "wangpingan" }
});

// 添加适当的事件监听器
window.addEventListener("pingan", e => {
  alert(`pingan事件触发，是 ${e.detail.name} 触发。`);
});
document.getElementById("leo2").addEventListener(
  "click", function () {
    // 派发事件
    window.dispatchEvent(myEvent);
  }
)
// 我们也可以给自定义事件添加属性
myEvent.age = 18;

Event() 和 CustomEvent() 的区别：