如何使用 Custom Elements 的 createdCallback、attachedCallback、detachedCallback 方法

在前端开发中，我们经常需要创建自定义的 HTML 元素，以满足特定的需求。Custom Elements 是一种 Web 标准，它允许我们创建自定义的 HTML 元素，并且可以通过 JavaScript 进行控制和操作。在 Custom Elements 中，我们可以使用三个方法：createdCallback、attachedCallback、detachedCallback，来控制元素的创建、添加和移除。

createdCallback

createdCallback 方法会在 Custom Element 被创建时调用。它只会在元素的实例被创建时调用一次，而不是每次元素被插入到文档中时都会调用。

在 createdCallback 方法中，我们可以执行一些初始化操作，比如添加子元素、设置属性等。下面是一个示例代码：

// javascriptcn.com 代码示例
<my-element></my-element>

<script>
  var MyElement = document.registerElement('my-element', {
    prototype: Object.create(HTMLElement.prototype, {
      createdCallback: {
        value: function() {
          var child = document.createElement('div');
          child.textContent = 'Hello world!';
          this.appendChild(child);
        }
      }
    })
  });
</script>

在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 createdCallback 方法会在元素被创建时调用。在 createdCallback 方法中，我们创建了一个名为 child 的 div 元素，并将其添加到 my-element 元素中。

attachedCallback

attachedCallback 方法会在 Custom Element 被添加到文档中时调用。它会在元素每次被添加到文档中时都会调用。

在 attachedCallback 方法中，我们可以执行一些与元素添加到文档有关的操作，比如添加事件监听器、请求数据等。下面是一个示例代码：

// javascriptcn.com 代码示例
<my-element></my-element>

<script>
  var MyElement = document.registerElement('my-element', {
    prototype: Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          this.addEventListener('click', function() {
            alert('Hello world!');
          });
        }
      }
    })
  });
</script>

在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 attachedCallback 方法会在元素被添加到文档中时调用。在 attachedCallback 方法中，我们为 my-element 元素添加了一个 click 事件监听器，并在事件触发时弹出一个提示框。

detachedCallback

detachedCallback 方法会在 Custom Element 从文档中移除时调用。它会在元素每次从文档中移除时都会调用。

在 detachedCallback 方法中，我们可以执行一些与元素从文档中移除有关的操作，比如取消事件监听器、清理数据等。下面是一个示例代码：

// javascriptcn.com 代码示例
<my-element></my-element>

<script>
  var MyElement = document.registerElement('my-element', {
    prototype: Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          this.addEventListener('click', function() {
            alert('Hello world!');
          });
        }
      },
      detachedCallback: {
        value: function() {
          this.removeEventListener('click', function() {
            alert('Hello world!');
          });
        }
      }
    })
  });
</script>

在上面的代码中，我们创建了一个名为 my-element 的 Custom Element，它的 attachedCallback 方法会在元素被添加到文档中时调用，detachedCallback 方法会在元素从文档中移除时调用。在 attachedCallback 方法中，我们为 my-element 元素添加了一个 click 事件监听器，在 detachedCallback 方法中，我们取消了这个事件监听器。

总结

Custom Elements 是一种强大的 Web 标准，它允许我们创建自定义的 HTML 元素，并且可以通过 JavaScript 进行控制和操作。在 Custom Elements 中，我们可以使用 createdCallback、attachedCallback、detachedCallback 方法，来控制元素的创建、添加和移除。通过这些方法，我们可以方便地对自定义元素进行初始化、添加事件监听器、请求数据等操作。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65560b92d2f5e1655d082d27