Custom Elements 是 Web Components 的一部分，它允许您定义自己的 HTML 元素并以类似于现有元素的方式使用它们。 由于 Custom Elements 接口使得它们的行为可以被完全自定义，开发者可以方便地在这些自定义元素上添加事件处理逻辑。这篇文章将讨论如何在自定义元素上处理事件。
一、Custom Elements事件介绍
Custom Elements 支持所有原生浏览器事件，包括鼠标事件、键盘事件以及触摸事件等。在自定义元素上注册事件和在原生 HTML 元素上注册类似，只需要调用 addEventListener() 函数即可：
customElement.addEventListener('click', function() {
// Handle click events here
});然而，与原生 HTML 元素不同的是，自定义元素不会自动生成事件。这意味着我们需要手动触发事件。 首先，创建一个自定义事件实例。然后，使用 dispatchEvent() 函数将事件分发到自定义元素上：
var event = new CustomEvent('myCustomEvent');
customElement.dispatchEvent(event);处理事件的方式与原生 HTML 元素非常相似。下一个示例将演示如何在自定义元素上处理 click 事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ ------- -- -
---------------- ------- --- -----------
---
-
-
----------------------------------- -----------二、事件委托：在父级元素上处理事件
在父元素上处理子元素的事件，是一种非常常见的模式。 这个技巧通常被称为事件委托。 在 Custom Elements 中，事件委托可以与传统的 DOM 元素一样工作。
下面的示例演示如何在 <my-element> 父元素上处理 <button> 元素的 click 事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ ------- -- -
-- ------------- -- -------------------- --- --------- -
---------------- ------ --- -----------
-
---
-
-
----------------------------------- -----------这个例子中，事件处理程序检查是否已触发事件的目标元素是 <button> 元素。
三、自定义事件：创建自己的事件
使用 Custom Elements，您可以创建自定义事件。
自定义事件的创建需要四个步骤：
- 使用
new CustomEvent()函数创建事件实例； - 指定自定义事件的类型；
- 将要传递给事件处理程序的数据存储在事件的
detail属性中； - 在 Custom Element 上调用
dispatchEvent()函数
以下是一个示例，演示如何创建、分派自定义事件并在元素上注册事件处理程序：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
--- ----- - --- ---------------------------- -
------- -
-------- ------ -------
-
---
--------------------------
-------------------------------------- ------- -- -
----------------------------------
---
-
-
----------------------------------- -----------这个例子中创建了一个自定义事件 myCustomEvent，事件携带一个包含消息文本的 detail 属性。事件被分派到 MyElement 上，然后触发事件处理程序。
四、结论
Custom Elements 提供了一种便捷的方式来创建自定义 HTML 元素和处理事件。 通过使用 Custom Elements，可以使前端开发更加高效，同时提供更好的组织和重用代码的方式。在这篇文章中，您已经了解了如何处理事件、如何委托事件以及如何创建自定义事件。
虽然 Custom Elements 是一个相对新的 Web APIs，但像其余的 Web APIs 那样，它有望在不久的将来得到更广泛的支持，因此值得您学习和尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e6723e884a3e30f260986