Custom Elements 是 Web Components 标准的一部分，它允许开发者自定义 HTML 元素，通过 JavaScript 来控制其行为，从而实现更加灵活的 Web 应用开发。在 Custom Elements 中，我们可以添加事件监听器来响应用户的操作，但是当我们需要处理多个子元素的事件时，事件委托技巧就显得尤为重要。
什么是事件委托？
事件委托是一种常用的前端开发技巧，它利用事件冒泡原理，将事件处理程序绑定在父元素上，从而避免了为每个子元素都绑定事件处理程序的繁琐工作。当子元素触发事件时，事件会冒泡到父元素，父元素就可以根据触发事件的子元素来执行相应的处理逻辑。
Custom Elements 中的事件委托技巧
在 Custom Elements 中，我们可以通过添加事件监听器来响应用户的操作，但是当我们需要处理多个子元素的事件时，事件委托技巧就显得尤为重要。下面是一个示例代码，展示了如何使用事件委托技巧来处理 Custom Elements 中的事件。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
----
-------- ------
-------- ------
-------- ------
-----
--
----------------------------------------- -----------------------------
-
------------------ -
-- --------------------- --- ----- -
-------------------- ----------------------------
-
-
-
--------------------------------------- ---------------在上面的示例代码中，我们创建了一个 Custom Element，它包含一个 ul 元素和三个 li 元素。我们将事件监听器绑定在 Custom Element 的 shadowRoot 上，当用户点击其中的 li 元素时，事件就会冒泡到 shadowRoot 上，我们可以通过判断 event.target 的 tagName 来确定触发事件的是哪个 li 元素，从而执行相应的处理逻辑。
实现方法
下面是一个更加详细的示例代码，展示了如何使用事件委托技巧来处理 Custom Elements 中的事件。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
----
-------- ------
-------- ------
-------- ------
-----
--
----------------------------------------- -----------------------------
-
------------------ -
-- ---------
----- ------ - -------------
-- ----- -- --
-- --------------- --- ----- -
-- -- -- -----
----- ----- - -------------------------------------------------------
-- -------
---------------------- ------------------------- -
------- -----
----
-
-
-
--------------------------------------- ---------------
-- -- ------ ------- --
----- ------------- - -----------------------------------------
-- ----------
-------------------------------------------- ----- -- -
-------------------- ---- ------------------
---
-- - ------ ------- --------
-----------------------------------------在上面的示例代码中，我们创建了一个 Custom Element，包含一个 ul 元素和三个 li 元素。我们将事件监听器绑定在 Custom Element 的 shadowRoot 上，当用户点击其中的 li 元素时，事件就会冒泡到 shadowRoot 上，我们可以通过判断 event.target 的 tagName 来确定触发事件的是哪个 li 元素，从而执行相应的处理逻辑。
在 handleClick 方法中，我们获取了触发事件的元素，并判断是否是 li 元素。如果是 li 元素，我们就获取了它的索引，并触发了一个自定义事件 item-click，将索引作为 detail 传递给监听器。在外部，我们创建了 Custom Element 实例，并添加了一个自定义事件监听器，当 Custom Element 中的 li 元素被点击时，就会触发该监听器。
总结
事件委托技巧是一种常用的前端开发技巧，它可以避免为每个子元素都绑定事件处理程序的繁琐工作。在 Custom Elements 中，我们可以通过添加事件监听器来响应用户的操作，但是当我们需要处理多个子元素的事件时，事件委托技巧就显得尤为重要。通过上面的示例代码，我们可以学习到如何在 Custom Elements 中使用事件委托技巧，从而实现更加灵活的 Web 应用开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510366a95b1f8cacd8cfad4