Web Components 是一种可重用和可扩展的 Web 应用程序构建方法，它包含了自定义元素、Shadow DOM 和 HTML 模板等技术。其中，事件委托和分发机制是 Web Components 中非常重要的一个部分，本文将对其进行深度解析。
事件委托
事件委托是指将事件处理程序绑定到父元素，使其代替子元素来处理事件。这种技术可以提高页面性能，减少事件处理程序的数量。
在 Web Components 中，我们可以使用事件委托来处理自定义元素中的事件。例如，我们可以在自定义元素的 connectedCallback 方法中添加事件委托：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
------------------------------ - -- -
-- ------------------ --- --------- -
------------------- ----------
-
---
-
-在上述代码中，我们在 MyElement 元素的 connectedCallback 方法中添加了一个 click 事件委托，它会判断点击的元素是否是一个按钮，如果是，则输出 "button clicked"。
需要注意的是，如果在自定义元素中使用了 Shadow DOM，那么事件委托应该绑定到 Shadow DOM 的根元素上，而不是自定义元素本身。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
------------- -----------
--
------------------------------------ - -- -
-- ------------------ --- --------- -
------------------- ----------
-
---
-
-在上述代码中，我们在 Shadow DOM 的根元素上添加了一个 click 事件委托，它会判断点击的元素是否是一个按钮，如果是，则输出 "button clicked"。
事件分发机制
事件分发机制是指在 Web Components 中，事件会从子元素向父元素冒泡，并且可以被捕获。这种机制可以用来实现自定义事件和组件通信。
在 Web Components 中，我们可以使用 CustomEvent 类来创建自定义事件。例如，我们可以在自定义元素中创建一个自定义事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
----- ------ - ---------------------------------
---------------- - ------ ----
-------------------------------- -- -- -
----- ----- - --- ----------------------- - ------- - -------- ------ ------ - ---
--------------------------
---
-------------------------
-
-在上述代码中，我们在自定义元素中创建了一个按钮，并在按钮的 click 事件中创建了一个自定义事件，它的名称是 my-event，携带了一个 message 数据。然后，我们通过 dispatchEvent 方法将自定义事件分发出去。
我们可以在自定义元素的外部添加一个事件监听器，来捕获自定义事件：
const myElement = document.createElement('my-element');
document.body.appendChild(myElement);
myElement.addEventListener('my-event', e => {
console.log(e.detail.message);
});在上述代码中，我们创建了一个 my-element 自定义元素，并在其外部添加了一个 my-event 事件监听器，它会输出自定义事件携带的 message 数据。
需要注意的是，如果在自定义元素中使用了 Shadow DOM，那么自定义事件应该从 Shadow DOM 的根元素上分发出去。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
------------- -----------
--
----- ------ - -----------------------------------
-------------------------------- -- -- -
----- ----- - --- ----------------------- - ------- - -------- ------ ------ - ---
--------------------------------
---
-
-在上述代码中，我们在 Shadow DOM 的根元素上分发了自定义事件。
总结
通过本文的介绍，我们了解了 Web Components 中的事件委托和分发机制。事件委托可以提高页面性能，减少事件处理程序的数量；事件分发机制可以用来实现自定义事件和组件通信。在实际开发中，我们应该根据具体情况来选择使用事件委托和分发机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fd520ed10417a2228aebb0