JavaScript 中的 CustomEvent

在 JavaScript 中，CustomEvent 是一种可以让开发者自定义事件的机制。它允许你定义一个具有自定义名称和数据的事件，并将其分发到文档中的任何元素上。这在某些情况下比使用原生事件更为灵活和便捷。

创建 CustomEvent

要创建一个 CustomEvent，你可以使用 CustomEvent 构造函数。下面是一个简单的例子：

// 创建一个名为 'my-event' 的 CustomEvent
const event = new CustomEvent('my-event', {detail: {message: 'Hello from CustomEvent!'},bubbles: true,cancelable: true
});

CustomEvent 构造函数参数

CustomEvent 构造函数接受两个参数：

事件名称：一个字符串，用于指定事件的名称。
选项对象：一个可选的对象，包含以下属性：
- detail：一个包含事件相关数据的对象。
- bubbles：一个布尔值，指示事件是否应该冒泡。默认为 false。
- cancelable：一个布尔值，指示事件是否可以被取消。默认为 false。

分发 CustomEvent

一旦你创建了 CustomEvent，你可以将其分发到任何元素上，如下所示：

// 获取需要分发事件的元素
const element = document.getElementById('my-element');// 添加事件监听器
element.addEventListener('my-event', function(e) {console.log('Received custom event:', e.detail.message);
});// 分发事件
element.dispatchEvent(event);

监听 CustomEvent

要监听 CustomEvent，你可以使用 addEventListener 方法，如上例所示。

示例

下面是一个完整的示例，演示了如何使用 CustomEvent 创建和分发事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CustomEvent Example</title>
</head>
<body><div id="my-element">Click me!</div><script>const event = new CustomEvent('my-event', {detail: {message: 'Hello from CustomEvent!'},bubbles: true,cancelable: true});const element = document.getElementById('my-element');element.addEventListener('my-event', function(e) {console.log('Received custom event:', e.detail.message);});element.onclick = function() {element.dispatchEvent(event);};</script>
</body>
</html>