Web Components 是一种用于构建可重用的 Web 应用程序组件的技术，它由一组标准组成，包括 Custom Elements、Shadow DOM 和 HTML Templates。其中，事件派发机制是 Web Components 中非常重要的一部分，本文将详细介绍 Web Components 中的事件派发机制。
事件派发机制简介
在 Web Components 中，事件派发机制是指组件内部的事件如何被派发到外部，以及外部如何监听组件内部的事件。事件派发机制的核心是 CustomEvent，它是一个可以携带自定义数据的事件。
在 Web Components 中，组件可以通过 dispatchEvent 方法派发 CustomEvent，外部可以通过 addEventListener 方法监听 CustomEvent。例如：
// 在组件内部派发事件
this.dispatchEvent(new CustomEvent('my-event', { detail: { message: 'Hello World!' } }));
// 在组件外部监听事件
myComponent.addEventListener('my-event', (event) => {
console.log(event.detail.message); // 输出：Hello World!
});在组件内部派发事件
在 Web Components 中，我们可以在组件内部通过 dispatchEvent 方法派发 CustomEvent。dispatchEvent 方法接受一个 CustomEvent 对象作为参数，可以携带自定义的数据。例如：
// 在组件内部派发事件
this.dispatchEvent(new CustomEvent('my-event', { detail: { message: 'Hello World!' } }));上面的代码在组件内部派发了一个名为 "my-event" 的事件，并携带了一个名为 "message" 的自定义数据。
在组件外部监听事件
在 Web Components 中，我们可以在组件外部通过 addEventListener 方法监听 CustomEvent。addEventListener 方法接受两个参数，第一个参数是事件的名称，第二个参数是事件处理函数。例如：
// 在组件外部监听事件
myComponent.addEventListener('my-event', (event) => {
console.log(event.detail.message); // 输出：Hello World!
});上面的代码在组件外部监听了一个名为 "my-event" 的事件，并在事件处理函数中输出了事件携带的自定义数据。
示例代码
下面是一个完整的 Web Components 示例代码，其中包含了事件派发机制的相关代码：
// www.javascriptcn.com code example
<!-- 定义一个名为 "my-component" 的 Web Component -->
<template id="my-component-template">
<style>
/* 在 Shadow DOM 中定义样式 */
:host {
display: block;
border: 1px solid black;
padding: 10px;
}
</style>
<slot></slot>
</template>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadowRoot = this.attachShadow({ mode: 'open' });
// 克隆模板内容，并插入 Shadow DOM
const template = document.querySelector('#my-component-template');
const content = template.content.cloneNode(true);
shadowRoot.appendChild(content);
// 在组件内部派发事件
this.dispatchEvent(new CustomEvent('my-event', { detail: { message: 'Hello World!' } }));
}
}
// 定义 Custom Element
customElements.define('my-component', MyComponent);
</script>
<!-- 在页面中使用 Web Component -->
<my-component></my-component>
<!-- 在页面中监听 Web Component 中的事件 -->
<script>
const myComponent = document.querySelector('my-component');
myComponent.addEventListener('my-event', (event) => {
console.log(event.detail.message); // 输出：Hello World!
});
</script>上面的代码定义了一个名为 "my-component" 的 Web Component，它在组件内部派发了一个名为 "my-event" 的事件，并在组件外部监听了该事件。在页面中使用该组件时，可以看到控制台输出了事件携带的自定义数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0f1fca941bf713420934b