介绍
Web Components 是当今前端领域的一个热门话题，其通过对一系列特性的结合，使得用户可以自定义 HTML 元素，进而实现组件化设计。组件化设计在提高代码复用性、降低维护成本等方面有着显著的优势。但是，Web Components 还有一个非常重要的特性，那就是支持自定义事件及事件触发方式。
在 Web Components 中，我们可以通过自定义事件来实现组件间的通信。用户自定义事件，并在需要的时候触发这些事件，从而传递数据。这种方式解耦了组件之间的依赖，使得代码更加简洁、易读、易维护。
本文将介绍 Web Components 中自定义事件的基本使用方法，及触发自定义事件的方式。
自定义事件的使用方法
创建自定义事件
Web Components 中，创建自定义事件需要使用 CustomEvent 对象。CustomEvent 构造函数需要传入两个参数，分别代表事件名称和事件参数。
----- ----- - --- ---------------------- -
------- -
-------- ------- -------
-
---上面的示例代码中，我们创建了一个名称为 myEvent 的自定义事件，并在事件参数中传入了一个 message 属性，该属性的值为 Hello, World!。
触发自定义事件
在 Web Components 中，触发自定义事件可以通过 dispatchEvent 方法来完成。该方法需要传入一个 CustomEvent 对象，作为触发的事件参数。
----- ----- - --- ---------------------- -
------- -
-------- ------- -------
-
---
------------------------------上面的示例代码中，我们创建了一个名称为 myEvent 的自定义事件，并在全局 document 对象上触发了这个事件。
事件触发方式
在 Web Components 中，事件可能在组件内部或组件外部触发。触发自定义事件的方式取决于事件的触发位置。
在组件内部触发事件
在组件内部触发自定义事件，可以通过 dispatchEvent 方法完成。
----- ----------- ------- ----------- -
------------- -
--------
------------------------------ -----------------------------
-
------------- -
----- ----- - --- ---------------------- -
------- -
-------- ------- -------
-
---
--------------------------
-
-在上面的示例代码中，我们在 MyComponent 组件中创建了一个名称为 myEvent 的自定义事件，并在组件的 click 事件处理程序中触发了这个事件。
在组件外部触发事件
在组件外部触发自定义事件，需要获取到组件实例并调用其 dispatchEvent 方法完成。
方法一：通过 document.querySelector 获取组件实例。
----- ----------- - ---------------------------------------
----- ----- - --- ---------------------- -
------- -
-------- ------- -------
-
---
---------------------------------在上面的示例代码中，我们通过 document.querySelector 方法获取 my-component 元素，并在该元素上触发了名称为 myEvent 的自定义事件。
方法二：通过 this.getRootNode().host 获取组件实例。
----- ----------- ------- ----------- -
------------- -
--------
------------------------------ -----------------------------
-
------------- -
----- ----- - --- ---------------------- -
------- -
-------- ------- -------
-
---
---------------------------------------------
-
-在上面的示例代码中，我们在 MyComponent 组件中获取其父级组件实例，并在该组件实例上触发了名称为 myEvent 的自定义事件。
结论
在 Web Components 中，自定义事件是实现组件通信的一个非常重要的方式。自定义事件可以让组件之间的依赖解耦，从而使代码更加简洁、易读、易维护。在设计 Web Components 时，自定义事件是必不可少的一部分。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718d288ad1e889fe22e6761