Custom Elements 中的事件传递流程剖析-JavaScript中文网-JavaScript教程资源分享门户

当我们开发 Web 应用时，我们常常需要自定义组件和事件，以实现业务需求。在 Custom Elements 规范中，浏览器提供了一种自定义 HTML 元素的方式，使得我们能够快速开发组件。本文将深入剖析 Custom Elements 中的事件传递流程，并提供一些示例代码，以帮助读者更好地理解和应用 Custom Elements。

Custom Elements 简介

Custom Elements 规范定义了一种机制，使得开发者可以自定义 HTML 元素。通过使用 Custom Elements API，我们可以创建一个新的 HTML 元素，指定其属性、方法、事件等等。具体来讲，我们可以使用 window.customElements.define(tagName, constructor[, options]) 方法来定义一个自定义元素。其中，tagName 是自定义元素的标签名，constructor 是一个类，用于定义自定义元素的属性和行为，options 则是可选的配置对象。

class MyElement extends HTMLElement {
  constructor() {
    super();
    // do something...
  }
}

customElements.define('my-element', MyElement);

定义好自定义元素之后，我们就可以在 HTML 中使用它了。

<my-element></my-element>

在 Custom Elements 中，事件的传递流程和普通 HTML 元素是不同的。接下来，我们将详细探讨 Custom Elements 中事件的传递流程。

事件的传递流程

事件的传递流程主要包括捕获阶段、目标阶段和冒泡阶段。在 Custom Elements 中，事件的传递流程和普通 HTML 元素类似，也分为这三个阶段。

在 Custom Elements 中，事件的传递从外部元素逐层递归到目标元素（即事件的绑定元素），然后再从目标元素逐层递归到外部元素。和普通 HTML 元素不同的是，Custom Elements 中的事件传递流程在递归的过程中，会跨越自定义元素的影子 DOM（Shadow DOM）边界。

影子 DOM 是 Custom Elements 的一个核心概念。每个 Custom Element 都具有自己的影子 DOM 树，它是一个与主 DOM 树分离的子树，包含了自定义元素内部的 DOM 结构。影子 DOM 使得 Custom Elements 规范具有了更好的封装性和隔离性。

在 Custom Elements 中，事件的传递流程可以通过以下示意图来理解：

   ┌──────────────────┐
   │          │       ├        |  |  |  |  |                      │              │
   │                    ├------v--v--v--v--v---------------->│              │
   │   Document       │      外部触发元素                      │      Shadow DOM     │
   │                    │<p>      ├        ^  *                               ↑  外部元素           │
   │  (Main DOM Tree) │         │                │<slot>    │                          │
   │                    │        目标元素           │         │             自定义元素         │
   │            │       ├------^--^--^--^--^----------------│              │
   │                    │                                                     │
   └──────────────────┘

在上图中，事件传递路径从外部元素开始，依次递归到自定义元素的内部，然后再递归到外部元素。具体来说，事件的传递流程如下：

外部触发元素发起事件。
事件依次从外部元素递归到自定义元素的影子 DOM 根节点，也就是 Custom Element 中的 Shadow Root。
事件在自定义元素内部发生冒泡，直到达到自定义元素内的目标节点。
事件再次递归到影子 DOM 根节点，并从影子 DOM 中穿过外部元素的影子 DOM 边界，传递到外部元素。
事件在外部元素中发生冒泡，直到达到 Main DOM Tree 的根节点（即 Document 对象）。

示例代码

下面是一个 Custom Element 示例代码，演示了如何在 Custom Element 中实现事件的捕获和冒泡。

class MyElement extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    const div = document.createElement('div');
    div.innerHTML = `
      <h1>Hello, World!</h1>
      <button>Click me!</button>
    `;

    div.querySelector('button').addEventListener('click', (event) => {
      console.log('Button clicked!');
    });

    this.shadowRoot.appendChild(div);
  }

  connectedCallback() {
    this.addEventListener('click', (event) => {
      console.log('Custom Element clicked!');
    }, { capture: true });
  }
}

customElements.define('my-element', MyElement);

在上面的代码中，我们定义了一个名为 my-element 的 Custom Element。在 constructor 中，我们创建了 Shadow DOM，并在其中插入了一些 HTML 元素，包括一个 <h1> 元素和一个 <button> 元素。我们同时在 <button> 元素上绑定了一个 click 事件。

在 connectedCallback 中，我们为 Custom Element 绑定了一个 click 事件，并通过 { capture: true } 将事件的传递模式设置为捕获模式。也就是说，当用户点击 Custom Element 时，事件会先从外部元素递归到 Custom Element，然后再从 Custom Element 递归到外部元素。

接下来，我们在 HTML 中使用 my-element 元素，并在其上绑定一个 click 事件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Custom Elements Example</title>
  </head>
  <body>
    <my-element></my-element>
    <script>
      const myElement = document.querySelector('my-element');
      myElement.addEventListener('click', (event) => {
        console.log('my-element clicked!');
      });
    </script>
  </body>
</html>

在页面加载完成后，我们点击 Custom Element，可以看到以下输出：

Custom Element clicked!
my-element clicked!
Button clicked!

从输出可以看出，事件的传递流程符合我们之前的描述：事件在 Custom Element 中发生了捕获和冒泡。值得注意的是，在 Custom Element 之外绑定的事件会先于 Custom Element 内部的事件触发。

总结

本文深入剖析了 Custom Elements 中事件的传递流程，并提供了相应的示例代码。在日常的 Web 开发中，掌握 Custom Elements 可以帮助我们更好地实现自定义组件和功能。通过深入了解 Custom Elements 的事件传递流程，我们可以更好地理解 Custom Elements 的设计思想和实现方式，从而更能够应用 Custom Elements 来实现业务需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6592816feb4cecbf2d748095

Custom Elements 中的事件传递流程剖析

Custom Elements 简介

事件的传递流程

示例代码

总结

纠错反馈