在 Web 开发中，Custom Elements 是一种非常强大的技术，它允许开发者自定义 HTML 元素，从而实现更高效、更灵活的界面开发。而 Custom Elements 除了可以自定义元素的外观和行为之外，还可以添加监听事件，让开发者对元素的各种状态进行监控。
在本文中，我们将讲解 Custom Elements 中多个监听事件的使用方式，包括生命周期事件、属性监听事件等。
生命周期事件
Custom Elements 中的生命周期事件包括 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback 四个。这些事件是在元素的生命周期中自动触发的，开发者可以利用这些事件来监听元素的生命周期变化。
connectedCallback
connectedCallback 是 Custom Elements 中最常用的生命周期事件，它在元素被插入到文档后调用。通常，我们在 connectedCallback 中进行一些初始化工作，比如 DOM 操作、绑定事件等。
下面是一个示例代码，展示了如何在 connectedCallback 中实现一个简单的弹出框：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
---------------------
--------
----- ------- ------- ----------- -
------------- -
--------
------------------------ ---------
------------------------- - -
-------
----- -
--------- ------
---- --
----- --
------ --
------- --
-
--------
-----
--------- -----------
------- -------------------------
------
--
-
------------------- -
----------------------------------------------------------------- -- -- -
--------------
---
-
-
--------------------------------- ---------
---------
-------
-------在上述代码中，我们定义了一个 MyModal 元素，在 connectedCallback 中添加了一个关闭按钮事件，当用户点击关闭按钮时，元素将被删除。
disconnectedCallback
disconnectedCallback 是当元素从文档中删除时自动触发的生命周期事件。通常，我们在 disconnectedCallback 中进行一些清理工作，比如解绑事件、清空数据等。
下面是一个示例代码，展示了如何在 disconnectedCallback 中实现一个简单的计数器：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------------- -
---------- - --
------------- - -------------- -- -
-------------
-------------- - ------- ---------------
-- ------
-
---------------------- -
-----------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上述代码中，我们定义了一个 MyCounter 元素，在 connectedCallback 中添加了一个 setInterval 定时器，每秒钟自增 count 值，并将其渲染到元素中。而在 disconnectedCallback 中，则清除了这个定时器。
adoptedCallback
adoptedCallback 是当元素被移动到新的文档时自动触发的生命周期事件。通常，我们在 adoptedCallback 中进行一些与文档相关的操作，比如重新渲染元素、更新链接等。
下面是一个示例代码，展示了如何在 adoptedCallback 中实现一个简单的导航栏：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
-----
-- -----------------
-- -----------------------
------
------
-------------------------
-------
--------
----- --------- ------- ----------- -
------------------- -
--------------------
-
--------------- -
----- ---- - ------------------
------------------------- -- --------
-
------------ -
-------------- - -
------------------------------
------- -- --- ------- --------
--
-
-
----------------------------------- -----------
---------
-------
-------在上述代码中，我们定义了一个 MyContent 元素，将其插入到一个包含导航栏和主要内容的页面中。在 adoptedCallback 中，我们根据页面的路径重新渲染了元素。
attributeChangedCallback
attributeChangedCallback 是当元素的属性值发生变化时自动触发的生命周期事件。通常，我们在 attributeChangedCallback 中根据新的属性值进行相应的操作。
下面是一个示例代码，展示了如何在 attributeChangedCallback 中实现一个简单的图片轮播器：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
------------ ---------------------------------------------------
--------
----- ---------- ------- ----------- -
------ --- -------------------- -
------ ------------
-
------------------- -
----------------- - --
----------- - ----------------------------------------
--------------
-------------- -- -
----------------- - ------------------ - -- - -------------------
--------------
-- ------
-
------------------------------ --------- --------- -
-- ----- --- --------- -- -------- --- --------- -
----------- - --------------------
--------------
-
-
-------- -
----- --- - ------------------------------
------- - -------------------------------
-------------- - ---
----------------------
-
-
------------------------------------ ------------
---------
-------
-------在上述代码中，我们定义了一个 MyCarousel 元素，可以根据 img-src 属性中设置的图片链接轮播展示。在 connectedCallback 中添加了一个 setInterval 定时器，每三秒钟自动切换到下一张图片。而在 attributeChangedCallback 中，我们重新根据新的图片链接进行渲染。
属性监听事件
除了生命周期事件之外，Custom Elements 还可以定义自己的属性监听事件，当指定的属性值发生变化时自动触发。
下面是一个示例代码，展示了如何在 Custom Elements 中实现属性监听事件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
-------
------
-----------------------
--------
----- -------- ------- ----------- -
------ --- -------------------- -
------ -------------
-
------------- -
--------
------------------------ ---------
------------------------- - -
------------- -----------
--
----------- - ----------------------------------------
-
------------------- -
------------------------------------- -- -- -
-----------------
---
-
------------------------------ --------- --------- -
-- ----- --- ----------- -
-------------------- - -------- --- -----
-
-
-
---------------------------------- ----------
---------
-------
-------在上述代码中，我们定义了一个 MyButton 元素，可以根据 disabled 属性设置按钮的禁用状态。在 attributeChangedCallback 中，我们监听了 disabled 属性的变化，并根据新的属性值更新了按钮的状态。
总结
Custom Elements 中的多个监听事件可以让开发者更好地了解元素的状态变化，并在必要时进行相应的操作。在实际开发中，开发者可以根据自己的需求定义相应的监听事件，从而最大限度地发挥 Custom Elements 的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653611267d4982a6ebde8172