如何为自定义元素添加事件处理程序

在前端开发中，有时需要使用自定义元素来完成特定的功能或者样式展示。但是，自定义元素不同于普通的 HTML 元素，它们没有一些默认的事件处理程序。因此，在使用自定义元素时，需要为它们添加事件处理程序以达到我们的预期效果。本文将介绍如何为自定义元素添加事件处理程序。

HTML 自定义元素简介

HTML 自定义元素是指以自定义标签名定义、继承自 HTMLElement 标准接口、可拥有自定义方法和属性，以及可与 HTML 原生元素进行交互的元素。HTML 自定义元素的注册过程分为两步骤：定义与注册。

定义自定义元素：

-- -------------------- ---- -------
--------- ---------
  ----- -- - ------ -------------
-----------

--------
  ----- --- ------- ----------- -
    ------------- -
      --------
      ------------------- ----- ------ ---
      ----- -------- - -------------------------------
      ----- ----- - ---------------------------------
      -----------------------------------
    -
  -
  ------------------------------------- -----
---------

代码中的 customElements.define('x-foo', Foo) 方法用于将 Foo 类定义为 x-foo 自定义元素。通过这种方式，我们就可以在 HTML 中使用 <x-foo></x-foo> 自定义元素，并渲染出一个含有

I am a custom element!

的 x-foo 元素。

注册自定义元素：

在自定义元素定义的基础上，还需要使用 registerElement() 函数注册自定义元素。

-- -------------------- ---- -------
--- ----- - ------------------------------------ -
  ---------------- -
    ------ ---------- -
      --- ---------- - ------------------------
      -------------------- - -------------- --------------
      --- ------ - -----------------------------------
      -------------------------------- ---------- -
        ------------- -----------
      ---
    -
  -
---

------------------------------------ - ---------- ----- ---

在注册自定义元素时，通过 Object.create() 函数创建了一个基于 HTMLElement.prototype 的新对象，并添加了 createdCallback 回调函数。在回调函数中，我们只是简单的创建了一个 ShadowRoot，然后向其中添加了一个 HTML 元素 <button>Click me!</button> 并为该元素添加了一个事件监听器，当用户点击按钮时，会弹出提示框。

为自定义元素添加事件处理程序

我们可以在自定义元素的 createdCallback 回调函数中为其添加事件处理程序，但这种方式做法单一，代码可读性差。这里我们将介绍两种常用的自定义元素事件处理方式。

方法一：

我们可以使用 addEventListener() 函数为自定义元素添加事件监听器。在以下示例中，我们需要修改定义自定义元素的代码：

-- -------------------- ---- -------
--------- ---------
  ----- -- - ------ -------------
-----------
--------
  ----- --- ------- ----------- -
    ------------- -
      --------
      ------------------- ----- ------ ---
      ----- -------- - -------------------------------
      ----- ----- - ---------------------------------
      -----------------------------------
      ------------------------------ -------------------------
    -

    --------- -
      ---------------- ------ ------- --- ---- -----------
    -
  -
  ------------------------------------- -----
---------

在代码中，我们添加了事件处理函数 onClick()，并通过 addEventListener() 函数为自定义元素添加了 click 事件监听器。

方法二：

如果我们需要将事件添加到 shadowRoot，可以在 shadowRoot 中添加事件监听器。在以下示例中，我们需要在定义自定义元素的构造器中使用 shadowRoot.addEventListener() 函数添加事件监听器：

-- -------------------- ---- -------
--------- ---------
  ----- -- - ------ -------------
-----------
--------
  ----- --- ------- ----------- -
    ------------- -
      --------
      ----- -------- - -------------------------------
      ----- ---------- - ------------------- ----- ------ ---
      ----- ----- - ---------------------------------
      ------------------------------
      ------------------------------------ -------------------------
    -

    --------- -
      ---------------- ------ ------- --- ---- -----------
    -
  -
  ------------------------------------- -----
---------

在代码中，我们添加了事件处理函数 onClick()，并通过 shadowRoot.addEventListener() 函数为自定义元素的 shadowRoot 添加了 click 事件监听器。

总结

使用自定义元素时，需要为其添加事件处理程序以达到我们的预期效果。
可以使用 addEventListener() 函数为自定义元素添加事件监听器。
可以在 shadowRoot 中添加事件监听器。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c11fb683d39b488157b6dc