在前端开发中，我们经常需要自定义事件来完成特定的业务逻辑。Web Components 是一种创建自定义元素和使用它们的新技术，它提供了 Custom Elements API，使得我们可以创建自定义元素，并为它们添加自定义事件。本文将介绍在 Custom Elements 中自定义事件的传参方式，并给出相应的示例代码。
CustomEvent
在 Custom Elements 中，我们可以使用 CustomEvent 对象来创建自定义事件。CustomEvent 是 MouseEvent 或者其他更高级事件的通用版本，它允许我们传递数据到事件处理函数中。CustomEvent 对象的构造函数有三个参数：
- type: 事件类型，它必须是一个字符串类型。
- initCustomEventArg: 一个对象，包含如下属性：
- detail: 事件数据，可以是任意类型的数据。
- bubbles: 布尔值，表示该事件是否冒泡。
- cancelable: 布尔值，表示该事件是否可以被取消。
- options (可选): 一个对象，包含如下属性：
- bubbles: 布尔值，表示该事件是否冒泡。
- cancelable: 布尔值，表示该事件是否可以被取消。
- detail: 事件数据，可以是任意类型的数据。
下面是一个创建 CustomEvent 对象的示例：
--- ----- - --- ----------------------- -
------- -
------ ------
------ -----
--
-------- -----
----------- ----
---dispatchEvent
当我们创建了一个自定义事件之后，就需要将它分派到相应的元素对象中。这时我们可以使用 dispatchEvent 方法，它是一个 DOM 方法，可以将一个实现了 Event 接口的对象分发到文档中。dispatchEvent 方法有一个参数，就是我们上面创建的 CustomEvent 对象。下面是一个使用 dispatchEvent 方法的示例：
--- ------- - -------------------------------------- -----------------------------
监听事件
当我们分派了一个自定义事件之后，就需要监听它了。我们可以使用 addEventListener 方法来监听自定义事件。addEventListener 方法有三个参数：
- type: 事件类型，它必须是一个字符串类型。
- listener: 事件处理函数，它会在事件被分发到元素上时被调用。
- options (可选): 一个对象，包含如下属性：
- capture: 布尔值，表示事件处理函数是在捕获阶段调用还是在冒泡阶段调用。
- once: 布尔值，表示该事件处理函数是否仅仅被调用一次。
- passive: 布尔值，表示该事件处理函数是否不会调用 preventDefault。
下面是一个使用 addEventListener 方法来监听自定义事件的示例：
--- ------- - -------------------------------------- ------------------------------------ --------------- - ------------------------ -------------- ---
示例
下面是一个在 Custom Elements 中创建自定义事件，并将数据传递给事件处理函数的完整示例：
-- -- ------ -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-- -- ----------- --
--- ----- - --- ----------------------- -
------- -
------ ------
------ -----
--
-------- -----
----------- ----
---
-- ----
--------------------------
-
-
-- -- ------ -------
----------------------------------- -----------
-- ----
--- ------- - --------------------------------------
------------------------------------ --------------- -
------------------------ --------------
---在上面的示例中，我们创建了一个名为 MyElement 的自定义元素，并在它连接到文档中时分派了一个名为 my-event 的自定义事件，同时将一些数据传递给事件处理函数。在该元素的事件监听函数中，我们接收到了传递过来的数据，并输出到控制台中。这个示例可以作为一个很好的参考，帮助我们了解在 Custom Elements 中创建和监听自定义事件的方式。
结论
在 Custom Elements 中，我们可以使用 CustomEvent 对象来创建自定义事件，并使用 dispatchEvent 方法将它分派到相应的元素上。我们还可以使用 addEventListener 方法来监听自定义事件，并在事件被分发到元素上时执行相应的事件处理函数。这些 API 是非常有用的，它们可以帮助我们在开发 Web Components 时实现各种复杂的业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6705a4b1d91dce0dc8543f40