js 自定义事件
时间: 2023-07-12 07:17:31 浏览: 50
JavaScript 中的自定义事件,是一种开发者可以创建自己的事件类型并且在需要的时候触发的机制。其基本流程如下:
1. 使用 CustomEvent 构造函数创建一个自定义事件对象,可以指定事件名称和一些可选的参数。
2. 使用 dispatchEvent 方法触发自定义事件,可以将自定义事件对象作为参数传递进去。
3. 使用 addEventListener 方法监听自定义事件,当自定义事件被触发时,绑定的回调函数会被执行。
下面是一个简单的示例代码,演示如何使用自定义事件:
```
// 创建一个自定义事件对象
const event = new CustomEvent('myEvent', {
detail: {
message: 'Hello, World!'
}
});
// 触发自定义事件
document.dispatchEvent(event);
// 监听自定义事件
document.addEventListener('myEvent', function(event) {
console.log(event.detail.message); // 输出 'Hello, World!'
});
```
在上面的代码中,我们首先使用 CustomEvent 构造函数创建了一个名为 'myEvent' 的自定义事件对象,并设置了一个包含消息的 detail 参数。然后我们使用 dispatchEvent 方法触发了自定义事件,并将自定义事件对象传递进去。最后,我们使用 addEventListener 方法监听了 'myEvent' 事件,当该事件被触发时,绑定的回调函数会被执行,并输出 'Hello, World!'。