随着前端开发的不断发展，自定义元素也变得越来越重要。Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义 HTML 元素，并在 Web 中使用它们。使用 Custom Elements 可以让我们更加灵活地开发 Web 应用程序。本文将介绍如何在 Custom Elements 中绑定事件委托，希望对您有所帮助。
什么是事件委托
事件委托是一种优化事件处理程序的方法，它允许我们将事件处理程序附加到多个元素，从而减少内存消耗和提高性能。相反，我们并不是将事件处理程序直接绑定到每个需要处理事件的元素上，而是在传递事件时检查其是否发起自需要处理事件的元素，然后在特定元素的父元素上触发该事件。
例如，我们可以使用以下代码在列表中的所有元素上绑定 click 事件：
const list = document.getElementById('myList');
list.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log('clicked on:', event.target.textContent);
}
});在这个例子中，我们只是在父元素上绑定了一个事件，而没有为每个列表项都添加一个事件处理程序。这将带来更好的性能和代码可维护性。
在 Custom Elements 中使用事件委托
现在假设我们已经创建了一个自定义元素 fancy-list，这个元素将展示一个带有样式和功能的列表。我们希望在 fancy-list 元素内部使用事件委托绑定 click 事件，以便在列表项上单击时触发事件。以下是代码：
-- -------------------- ---- -------
--------- -------------------------
-------
--------- -
----------------- -------
-
--------
----
-------------
-----
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
------------------------------------ ------- -- -
-- --------------------- --- ----- -
------------------------------------------
-
---
-
-
----------------------------------- -----------
---------在这个例子中，我们首先使用 <template> 元素来创建 fancy-list 内部的 HTML 结构和样式。接下来，我们创建一个自定义元素 FancyList，其构造函数使用 attachShadow 方法将 Shadow DOM 添加到自定义元素中。然后，我们在 Shadow DOM 上侦听 click 事件，并使用 if 语句检查目标元素是否为列表项。如果是，我们会将 selected 类附加到被单击的元素上。
注意，在上面的示例中，我们使用 Shadow DOM 来封装 fancy-list 的样式和行为。这样做可以确保 fancy-list 不会受到外部样式表的影响，并且可以保护其内部元素。
总结
在 Custom Elements 中使用事件委托可以极大地提高应用程序的性能和可维护性。我们可以将事件处理程序附加到父元素上，而不是每个需要处理事件的子元素上。这篇文章介绍了如何在 Custom Elements 中使用事件委托，希望对您有所帮助。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d93b0968c7c53b085d1b6