Custom Elements 是 Web Components 的一部分，是一种能够自定义 HTML 元素的技术。与传统的 HTML 元素不同，Custom Elements 可以自定义属性和方法，并且可以创建自己的事件。在本文中，我们将探讨 Custom Elements 的事件处理和委托技巧，并介绍一些实验性质的探讨。
事件处理和委托技巧
事件处理
Custom Elements 可以创建自己的事件，并且可以通过 dispatchEvent() 方法在元素上触发事件。下面是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ ------------------
-
------------------ -
------------------------
-
-
----------------------------------- -----------在上面的示例中，我们创建了一个名为 MyElement 的 Custom Element，并在构造函数中添加了一个 click 事件处理程序。当用户点击元素时，会触发 handleClick() 方法，并输出 Clicked!。
委托
委托是一种处理事件的技术，它可以将事件处理程序添加到元素的祖先元素上，而不是直接添加到元素本身。这样可以减少事件处理程序的数量，并提高性能。
下面是一个使用委托的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ ------------------
-
------------------ -
-- ------------------------------------ -
------------------- -----------
-
-
-
----------------------------------- -----------在上面的示例中，我们添加了一个 click 事件处理程序，并使用 closest() 方法检查事件的目标元素是否是一个名为 my-button 的按钮。如果是，就会输出 Button clicked!。
实验性质探讨
Shadow DOM 中的事件处理
Shadow DOM 是一种创建封装的 DOM 树的技术，可以将元素的样式和行为与页面中的其他元素隔离开来。在 Shadow DOM 中，事件处理程序只能在 Shadow DOM 中找到，而不能在页面中找到。
下面是一个使用 Shadow DOM 的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
---------------- - -
------- ----------------------- ------------
--
------------------------------------------------------------ ------------------
-
------------------ -
------------------- -----------
-
-
----------------------------------- -----------在上面的示例中，我们创建了一个 Shadow DOM，并在其中添加了一个名为 my-button 的按钮。我们还将 click 事件处理程序添加到按钮上，当用户点击按钮时，会输出 Button clicked!。
自定义事件
除了使用浏览器提供的事件外，Custom Elements 还可以创建自己的事件。下面是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ----- - --- ----------------------- -
-------- -----
----------- -----
------- - -------- ------- ------- --
---
--------------------------
-
-
----------------------------------- -----------在上面的示例中，我们创建了一个名为 my-event 的自定义事件，并通过 dispatchEvent() 方法在元素上触发事件。我们还设置了事件的 bubbles 和 cancelable 属性，以及事件的 detail 属性，该属性包含一个消息。
总结
在本文中，我们探讨了 Custom Elements 的事件处理和委托技巧，并介绍了一些实验性质的探讨。通过了解 Custom Elements 的事件处理和委托技巧，以及实验性质的探讨，我们可以更好地使用 Custom Elements 技术，并创建更强大的自定义 HTML 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658c69e3eb4cecbf2d1da42d