Custom Elements 是一个强大的 Web API，它允许开发者创建自定义 HTML 元素。在使用 Custom Elements 中，很重要的一步是正确地绑定事件处理程序。本文将介绍如何正确地使用 Custom Elements 绑定事件处理程序，内容详细且有深度和学习以及指导意义，并包含示例代码。
什么是 Custom Elements
Custom Elements 是 Web 标准的一部分，它是一种允许开发者创建自定义 HTML 元素的方式。它让开发者能够封装功能和样式，并提供一组常用的 API，透过 JavaScript 脚本动态创建或操作元素。Custom Elements 优雅地解决了 Web 开发中的语义化问题，使开发者能够为 HTML 添加新的、有意义的元素，并使其更易于重用和扩展。
自定义事件
在 Custom Elements 中，事件是非常重要的。自定义元素除了拥有原生 HTML 元素的所有事件之外，还可以定义自己的事件。任何元素都可以触发自定义事件，并且它们可以通过事件名（event name）来标识。我们可以使用 “new Event()” 来创建一个自定义事件：
const event = new Event('my-event');上面代码创建了一个名为 “my-event” 的自定义事件对象。我们可以为任何元素添加这个事件监听器：
element.addEventListener('my-event', (event) => {
console.log('my-event 触发了！');
});但是，如果我们在组件的 constructor 函数中添加事件监听器，那么我们需要小心。由于 Custom Elements 构造函数只会在元素首次插入文档时调用一次，因此我们需要使用 “connectedCallback()” 方法来确保每次元素插入文档时都有事件监听器：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----
--------------------------------- --------------------
-
------------------- -
-- -----
--------------------------------- --------------------
-
-------------------- -
--------------------- -------
-
-
------------------------------------------ -----------在上面的例子中，我们定义了一个自定义元素 “my-element”，并添加了 “my-event” 事件监听器。正如我们所看到的，我们在构造函数中注册了事件监听器，但这样是错误的。正确的方法是在 “connectedCallback()” 方法中注册事件监听器。
事件代理
为了最大程度地减少事件监听器的数量，并提高性能，我们可以使用事件代理。事件代理是一种实现处理程序函数的方式，该函数只需要在其自身或嵌套的子元素上添加一次。使用事件代理时，事件不是直接附加到单个元素，而是附加到整个文档（或父元素）。当事件发生时，可以使用 “event.target” 属性找到真正的目标。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------ --------------------
-
-------------------- -
-- ----------------------------------- -
----------------- -------- -------
- ---- -
---------------- ---------- -------
-
-
-
------------------------------------------ -----------上面的例子中，我们定义了一个自定义元素 “my-element” 。我们为整个元素添加了 “click” 事件监听器，但是我们只关心是否被 “my-class” 类选中的子元素被点击。我们使用 “matches()” 方法来判断目标元素是否具有 “my-class” 类，并输出不同的消息。
总结
在 Custom Elements 中，事件是非常重要的。我们可以使用自定义事件来让元素与外部进行交互，也可以使用事件代理来降低事件监听器的数量。但在绑定事件处理程序时，我们需要注意的是，正确的方式是在 “connectedCallback()” 方法中绑定处理程序，以确保元素每次插入文档时都有事件监听器。
参考文献
示例代码
CodePen - Custom Elements 事件处理程序
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a9689968c7c53b0648d8b