在 Web 开发中，Custom Elements 为我们提供了一种方便的方式来创建自定义的 HTML 标签。而在 Custom Elements 中，我们可以通过事件和数据来进行不同组件之间的交互。本文将详细讲述如何在 Custom Elements 中使用事件和数据进行交互，帮助读者更好地理解和使用 Custom Elements。
Custom Elements 概述
Custom Elements 是一种新的 Web API，它允许我们定义自己的 HTML 元素，并通过 JavaScript 控制它们。使用 Custom Elements，我们可以创建像原生 HTML 标签一样使用的自定义元素，而不需要使用框架或第三方库。Custom Elements 与 Shadow DOM、HTML Templates 和 HTML Imports 一起组成了 Web 组件的基础。
Custom Elements 的使用非常简单，我们只需要执行以下几个步骤：
- 定义 Custom Element 的类（继承自 HTMLElement）。
- 通过
window.customElements.define()方法将类注册成 Custom Element。 - 在 HTML 中使用自定义元素。
下面是一个简单的 Custom Element 的例子：
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h1>Hello Custom Element!</h1>';
}
}
window.customElements.define('my-element', MyElement);在 HTML 中使用自定义元素：
<my-element></my-element>
事件
在 Custom Elements 中，我们可以使用事件来进行组件之间的通信。事件是浏览器中最常用的异步通信机制之一，可以帮助我们在组件之间进行松耦合的交互。
如果我们想在 Custom Elements 中触发事件，则可以使用 Element 的 dispatchEvent() 方法。该方法需要一个 Event 类型的参数。例如下面的代码将触发一个名为 my-event 的自定义事件：
const myEvent = new Event('my-event');
this.dispatchEvent(myEvent);而如果我们想监听 Custom Element 中的事件，则可以使用 addEventListener() 静态方法。该方法需要两个参数，第一个参数是要监听的事件名，第二个参数是事件处理函数。
例如下面的代码将监听 my-event 事件并在触发时执行回调函数：
document.querySelector('my-element').addEventListener('my-event', () => {
console.log('my-event 这个 Custom Event 被触发了！');
});需要注意的是，如果我们想在 Custom Elements 中触发的事件能够被外部捕获，则需要将事件定义为可以冒泡的。具体来说，需要在 Event 的构造函数中传入 bubbles: true：
const myBubblingEvent = new CustomEvent('my-bubbling-event', { bubbles: true });
this.dispatchEvent(myBubblingEvent);数据
除了使用事件外，我们还可以使用数据来进行 Custom Elements 之间的通信。数据是组件之间最基本的通信方式之一，可以帮助我们实现不同组件之间的数据交换，从而完成各种功能。
如果我们想在 Custom Elements 中传递数据，则可以使用 Element 的 getAttribute() 和 setAttribute() 方法。例如下面的代码将在 Custom Element 中设置一个属性：
this.setAttribute('my-attribute', '属性值');而如果我们想在 Custom Element 中获取属性，则可以使用 getAttribute() 方法。例如下面的代码将获取名为 my-attribute 的属性：
const myAttributeValue = this.getAttribute('my-attribute');需要注意的是，如果我们希望属性的值可以在 Custom Elements 之间进行双向绑定，则需要使用 Object.defineProperty() 方法来定义属性的 getter 和 setter。具体来说，需要在 Custom Element 的构造函数中添加如下代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ---
-
--- ------------ -
------ -----------------
-
--- ----------------- -
---------------- - ------
-- -------
----- ------- - --- ----------------------- -
------- -
------ -----
-
---
----------------------------
-
-
------------------------------------------ -----------上面的代码中，myProperty 是一个自定义属性，使用了 getter 和 setter 方法。当属性的值发生变化时，会触发一个自定义事件 my-event，该事件的 detail 属性中包含了提交的值。
而在使用 Custom Element 的页面或组件中，则可以在模板中使用 data- 前缀为自定义元素添加属性。例如下面的代码将设置 my-property 属性：
<my-element data-my-property="属性值"></my-element>
而如果需要监听 Custom Element 中的属性变化，则可以使用 Object.observe() 或 Proxy API。例如下面的代码将监听 Custom Element 的 myProperty 属性变化：
const myElement = document.querySelector('my-element');
Object.observe(myElement, (changes) => {
changes.forEach((change) => {
if (change.name === 'myProperty') {
console.log(change.object.myProperty, change.oldValue);
}
});
});示例代码
下面是一个完整的 Custom Elements 的示例代码，其中包含了事件和数据之间的交互：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ---
-
--- ------------ -
------ -----------------
-
--- ----------------- -
---------------- - ------
-- -------
----- ------- - --- ----------------------- -
------- -
------ -----
-
---
----------------------------
-
------------------- -
-- ------
----- ------ - ---------------------------------
---------------- - ------
-------------------------------- -- -- -
-- -- ----------
--------------- - --- ----------------------------
---
-------------------------
-
-
------------------------------------------ -----------
-- -- ------ ------- -- ---------- ----
----- --------- - -------------------------------------
------------------------- --------- -- -
------------------------ -- -
-- ------------ --- ------------- -
------------------------------------- -----------------
-
---
---
-- -- ------ ------- -- -------- --
----------------------------------------------------------------- ------- -- -
--------------------------------
---总结
本文详细介绍了如何在 Custom Elements 中使用事件和数据进行交互，希望对读者理解 Custom Elements 的使用和实现有所帮助。Custom Elements 是 Web 组件中的基础构建模块，它的出现将有助于提高 Web 开发的效率和可维护性，帮助开发者构建高质量的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64799246968c7c53b05907b2