在 Web 前端开发中，我们通常使用自定义元素 (Custom Elements) 来创建符合特定需求的组件，自定义元素允许我们定义自己的标签和属性，并将其作为原生 HTML 标签一样使用。但是，在自定义元素中添加事件监听器时，可能会遇到一些问题，本文将介绍这些问题及其解决方式。
问题
在自定义元素中添加事件监听器时，有些事件无法被触发，例如 click、keydown 等事件。这是因为 Custom Elements 采用了 Shadow DOM 技术，即自定义元素内部的所有节点都被封装在一个 Shadow DOM 中，这使得事件监听器无法感知到元素上的事件。
解决方式
1. 使用 attachShadow 中的 mode 属性
在 attachShadow 中，我们可以设置 Shadow DOM 的 mode 属性，其值可以为 open 或 closed：
this.attachShadow({ mode: 'open' })open表示 Shadow DOM 是开放的，外部可以访问内部定义的元素和事件；closed表示 Shadow DOM 是封闭的，外部无法访问内部定义的元素和事件。
可以使用 open 来解决事件监听器无法感知到元素上的事件的问题。
示例代码如下：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
------------- -----------
--
----------------------------------------------------------------- --------------
-
--------- -
------------------- ----------
-
-
-------------------------------------- --------------2. 使用 composed 选项
在 addEventListener 中，我们可以使用 composed 选项来解决事件监听器无法感知到元素上的事件的问题。composed 选项表示事件是否可以跨 Shadow DOM 边界触发。
示例代码如下：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
------------------- ----- -------- ---
------------------------- - -
------------- -----------
--
----------------------------------------------------------------- ------------- - --------- ---- ---
-
--------- -
------------------- ----------
-
-
-------------------------------------- --------------3. 使用 dispatchEvent 抛出自定义事件
在自定义元素内部，我们可以使用 dispatchEvent 方法抛出自定义事件，监听该事件来实现组件的通信。
示例代码如下：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
------ ------------
--
------------- - ---------------------------------------
--------------------------------------- ------- -- -
---------------------- ----------------------- - ------- ------------------ ----
---
-
-
----- ------------ ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-----------
--
-------------- - -------------------------------------
------------------------------------- ------- -- -
-------------------------- - -------------
---
-
-
------------------------------------- -------------
-------------------------------------- --------------在上述代码中，CustomInput 组件抛出了一个自定义事件 my-input 并传递了输入框的值，CustomOutput 组件监听了该事件，并将值显示在组件内部。这种方式也可以避免事件监听器无法感知到元素上的事件的问题。
结论
通过上述方法，我们可以解决 Custom Elements 事件监听的问题，实现更加灵活、高效的组件通信和交互。希望本文能对您的 Web 前端开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677604416d66e0f9aa08cfe4