这篇文章将介绍如何使用 npm 包 @ungap/custom-event 创建和分发自定义事件。@ungap/custom-event 是一个跨浏览器的 Polyfill（即在不支持现代 JavaScript 特性的浏览器上实现这些特性）。
安装
在使用 @ungap/custom-event 之前，需要先在项目中安装它。可以使用 npm 或者 yarn 来安装：
npm install @ungap/custom-event
yarn add @ungap/custom-event
使用 @ungap/custom-event
接下来，我们将详细介绍如何使用 @ungap/custom-event。
创建事件
要创建一个自定义事件，只需要使用 CustomEvent 构造函数。
const myEvent = new CustomEvent('myEvent', { detail: { someValue: 'example' } });这里的第一个参数是事件的名称，可以是任何字符串，而第二个参数是可选的事件配置对象。在配置对象中，可以添加一些事件相关的属性，如 bubbles（默认值为 true，表示事件可以冒泡）、cancelable（默认值为 true，表示事件可以通过 preventDefault() 方法取消）、detail（事件数据）等。
分发事件
创建事件对象之后，可以使用 dispatchEvent() 方法将事件分发给需要监听它的元素。例如：
document.dispatchEvent(myEvent);
监听事件
对于所有支持事件的对象，可以通过 addEventListener() 方法来监听事件：
document.addEventListener('myEvent', event => {
console.log(`Event fired with detail: ${event.detail.someValue}`);
});实际示例
下面是一个实际的示例，演示如何使用 @ungap/custom-event：
<button id="my-button">Click me!</button>
-- -------------------- ---- ------- ------ ----------- ---- ---------------------- ----- ------ - ------------------------------------- -------------------------------- -- -- - ----- ------- - --- ---------------------- - ------- - ---------- --------- - --- -------------------------------- --- ------------------------------------ ----- -- - ------------------ ----- ---- ------- ---------------------------- ---
这个示例中，我们在按钮的 click 事件中创建了一个自定义事件，并将其分发到 document 上。然后，在 document 上监听这个事件，并在每次事件被触发时输出事件数据。
指导意义
@ungap/custom-event 为我们提供了跨浏览器、跨平台的方式来创建和分发自定义事件。在某些情况下，尤其是当我们需要在较老的浏览器上使用较新的事件 API 时，这个工具包非常有用。同时，这篇文章还介绍了 CustomEvent 和 dispatchEvent 方法的用法，这对于更深入了解 JavaScript 事件机制的开发者也非常有益。
总体来说，掌握 @ungap/custom-event 使用方法是前端工程师非常有必要的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbce6b5cbfe1ea0611a52