当前位置：首页 > web >正文

浏览器【详解】自定义事件 CustomEvent

web 2025/8/6 18:03:59

简介

CustomEvent 是浏览器原生支持的一种事件类型，允许开发者自定义事件并在 DOM 中触发、监听，用于实现组件间通信或特定业务逻辑的解耦。

与浏览器内置事件（如 click、load）相比，CustomEvent 的核心优势是可以携带自定义数据，并能在任意 DOM 元素上触发和监听。

应用场景

组件通信：在前端框架（如 Vue、React）中，非父子组件可通过自定义事件传递数据
状态通知：如用户登录状态变化、数据加载完成等全局状态通知
插件扩展：为自定义插件设计事件接口，允许外部监听插件内部状态变化

创建自定义事件 new CustomEvent

const myEvent = new CustomEvent(eventName, options);

eventName：事件名称（字符串，遵循命名规范，如 user-login、data-updated）
options：配置对象（可选），包含：
- detail：任意类型数据【只读】，作为事件的附加信息（最常用），要想修改，只能重新创建事件
- bubbles：布尔值，是否冒泡（默认 false）
- cancelable：布尔值，是否可被取消（默认 false）

触发（派发）事件 dispatchEvent

// 在 document 上触发自定义事件
document.dispatchEvent(myEvent);

// 在特定元素上触发
const myElement = document.getElementById('my-element');
myElement.dispatchEvent(myEvent);

监听自定义事件 addEventListener

// 监听 document 上的自定义事件
document.addEventListener('user-login', (event) => {console.log('用户登录了！', event.detail); // 访问自定义数据
});

// 监听特定元素的事件
myElement.addEventListener('data-updated', handleDataUpdate);

实战范例

// 1. 定义事件处理函数
function handleMessage(event) {console.log('收到消息：', event.detail);console.log('事件来源：', event.target);
}// 2. 监听自定义事件
document.addEventListener('custom-message', handleMessage);// 3. 创建并触发事件（可在任意位置执行）
const messageData = { content: 'Hello CustomEvent', timestamp: new Date().getTime() 
};// 创建事件，允许冒泡
const messageEvent = new CustomEvent('custom-message', {detail: messageData,bubbles: true
});// 在某个元素上触发（若 bubbles 为 true，会向上冒泡）
document.getElementById('sender').dispatchEvent(messageEvent);// 4. 移除事件监听（必要时）
// document.removeEventListener('custom-message', handleMessage);