自从 Custom Elements （自定义元素）被加入到 HTML 标准中后，它们已经成为了前端开发中不可或缺的一部分。通过使用 Custom Elements，开发人员可以轻松地创建自定义的 HTML 标签，它们可以像原生 HTML 标签一样使用，并且可以结合其他的前端技术如 Shadow DOM 和 CSS 变量来创建高度可定制化的 Web 组件。
在这篇文章中，我们将探讨如何在 Custom Elements 中添加事件监听器。事件监听器可以使得组件更加动态化，并且使得它们可以适应用户的交互需求。本文中会涵盖添加事件监听器的所有主要方法，并且会提供示例代码和详细的步骤说明，让您能够在实际开发中轻松应用这些技术。
使用 addEventListener 方法
最简单的添加事件监听器的方法是使用 JavaScript 的 addEventListener 方法。该方法可以在任何 Element 对象上监听任何浏览器支持的事件，Custom Elements 也不例外。在一个 Custom Element 的类中，我们可以在 connectedCallback 方法中使用 addEventListener 方法来监听一个事件，如下所示：
class MyElement extends HTMLElement {
connectedCallback() {
this.addEventListener('click', (event) => {
console.log('clicked')
})
}
}这个示例代码监听了 click 事件，并将一个回调函数传递给 addEventListener 方法。在这个回调函数中，我们简单地将一个 "clicked" 的字符串信息打印到了控制台中。每当该元素被点击时，这条信息就会被打印。
直接将事件监听器绑定到 HTML 标签上
如果您喜欢将 HTML 和 JavaScript 直接绑定在一起，那么您可以使用元素的 onclick 属性来添加事件监听器。在 Custom Elements 中，这个属性可以被添加到一个类的 constructor 方法中，如下所示：
class MyElement extends HTMLElement {
constructor() {
super()
this.onclick = (event) => {
console.log('clicked')
}
}
}这个示例代码中的 onclick 事件可以被转化为任何其他的事件，如 onkeydown 或 onblur 等等。但是这个方法不如 addEventListener 方法灵活，因为它只支持单个事件，无法支持多个事件监听器的情况。
使用 event delegation 技术
利用 event delegation 技术，您可以将事件监听器添加到包含 Custom Element 的父级 Element 上，而不是直接添加到 Custom Element 上。这种技术对于动态创建的元素非常有用，因为您可以在创建之前就定义好其事件监听器。使用 event delegation 技术可以有效地减少事件监听器数量，并且可以使代码更加简洁易用。
下面是一个示例代码，它演示了如何使用 event delegation 技术来监听一个 Custom Element 中的事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
-------
-
------------------- -
----------------------------------------- ------- -- -
-- ------------- --- ----- -
----------------------
-
--
-
-在这个示例代码中，我们在 Custom Element 类的 constructor 中创建了一个新元素。在 connectedCallback 方法中，我们将事件监听器添加到了该元素的父节点上，而不是直接添加到该元素上。在事件监听器内部，我们使用了简单的 if 语句来判断该事件是否发生在 Custom Element 上。如果是，那么我们就会执行特定的操作。
总结
在本篇文章中，我们已经学习了三种常见的方式来添加事件监听器到 Custom Elements 中。不管您选择何种方式，务必记住，在添加事件监听器时，您需要非常小心。在实际开发中，您应该注意避免处理可能会导致内存泄漏的不必要事件监听器，并且应该定期清理那些不再使用的事件监听器。
总而言之，Custom Elements 的灵活性和可定制化使得它们成为前端开发的不可或缺的一部分。掌握如何在 Custom Elements 中添加事件监听器可以让您创建出优秀的交互式 Web 组件，并且可以为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649feaa148841e9894c4587a