在前端开发中，我们常常需要使用自定义组件来构建复杂的应用程序。使用 Custom Elements 可以方便地创建自定义 HTML 元素，但是当我们需要在子组件中绑定事件时，就需要特别注意了。
Custom Elements 的事件绑定
在 Custom Elements 中，我们可以使用 addEventListener 方法来绑定事件。例如，我们可以在自定义元素的构造函数中添加以下代码：
class MyElement extends HTMLElement {
constructor() {
super();
this.addEventListener('click', () => {
console.log('Clicked!');
});
}
}这样，当用户点击这个自定义元素时，就会在控制台中输出 Clicked!。
处理子组件的事件绑定
当我们在自定义元素中使用子组件时，我们需要考虑如何在子组件中绑定事件。如果我们直接在子组件的构造函数中绑定事件，那么该事件只会在子组件被创建时绑定一次，而不会在每次子组件被添加到父元素中时重新绑定。
为了解决这个问题，我们可以使用 Custom Events。Custom Events 可以让我们在父元素中监听子元素的事件，并在子元素被添加到父元素中时重新绑定事件。
下面是一个示例代码，其中包含一个父元素和一个子元素。当用户点击子元素时，子元素会触发一个自定义事件 my-event，父元素会监听这个事件并在控制台中输出 Clicked!。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
-------
------
-----------
---------------------
------------
--------
----- -------- ------- ----------- -
------------- -
--------
--------------------------------- -- -- -
------------------------
---
-
------------------- -
----- ----- - -------------------------------
------------------------------- -- -- -
----------------------- -------------------------
---
-
-
----- ------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------ -- -- -
---------------------- -------------------------
---
-
-
---------------------------------- ----------
--------------------------------- ---------
---------
-------
-------在上面的代码中，我们在父元素的 connectedCallback 方法中获取子元素并绑定 click 事件。当用户点击子元素时，子元素会触发一个自定义事件 my-event，父元素会监听这个事件并在控制台中输出 Clicked!。
结论
在使用 Custom Elements 时，我们需要特别注意如何处理子组件的事件绑定。使用 Custom Events 可以让我们在父元素中监听子元素的事件，并在子元素被添加到父元素中时重新绑定事件。这样，我们就可以在自定义组件中方便地处理事件绑定了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6763ac28856ee0c1d4216806