Custom Elements 中的多个监听事件-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，Custom Elements 是一种非常强大的技术，它允许开发者自定义 HTML 元素，从而实现更高效、更灵活的界面开发。而 Custom Elements 除了可以自定义元素的外观和行为之外，还可以添加监听事件，让开发者对元素的各种状态进行监控。

在本文中，我们将讲解 Custom Elements 中多个监听事件的使用方式，包括生命周期事件、属性监听事件等。

生命周期事件

Custom Elements 中的生命周期事件包括 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback 四个。这些事件是在元素的生命周期中自动触发的，开发者可以利用这些事件来监听元素的生命周期变化。

connectedCallback

connectedCallback 是 Custom Elements 中最常用的生命周期事件，它在元素被插入到文档后调用。通常，我们在 connectedCallback 中进行一些初始化工作，比如 DOM 操作、绑定事件等。

下面是一个示例代码，展示了如何在 connectedCallback 中实现一个简单的弹出框：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element</title>
</head>
<body>
  <my-modal></my-modal>
  <script>
    class MyModal extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `
          <style>
            :host {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
            }
          </style>
          <div>
            <h2>Modal Dialog</h2>
            <button id="close">Close</button>
          </div>
        `;
      }

      connectedCallback() {
        this.shadowRoot.querySelector('#close').addEventListener('click', () => {
          this.remove();
        });
      }
    }

    customElements.define('my-modal', MyModal);
  </script>
</body>
</html>

在上述代码中，我们定义了一个 MyModal 元素，在 connectedCallback 中添加了一个关闭按钮事件，当用户点击关闭按钮时，元素将被删除。

disconnectedCallback

disconnectedCallback 是当元素从文档中删除时自动触发的生命周期事件。通常，我们在 disconnectedCallback 中进行一些清理工作，比如解绑事件、清空数据等。

下面是一个示例代码，展示了如何在 disconnectedCallback 中实现一个简单的计数器：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element</title>
</head>
<body>
  <my-counter></my-counter>
  <script>
    class MyCounter extends HTMLElement {
      connectedCallback() {
        this.count = 0;
        this.interval = setInterval(() => {
          this.count++;
          this.innerHTML = `Count: ${this.count}`;
        }, 1000);
      }

      disconnectedCallback() {
        clearInterval(this.interval);
      }
    }

    customElements.define('my-counter', MyCounter);
  </script>
</body>
</html>

在上述代码中，我们定义了一个 MyCounter 元素，在 connectedCallback 中添加了一个 setInterval 定时器，每秒钟自增 count 值，并将其渲染到元素中。而在 disconnectedCallback 中，则清除了这个定时器。

adoptedCallback

adoptedCallback 是当元素被移动到新的文档时自动触发的生命周期事件。通常，我们在 adoptedCallback 中进行一些与文档相关的操作，比如重新渲染元素、更新链接等。

下面是一个示例代码，展示了如何在 adoptedCallback 中实现一个简单的导航栏：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element</title>
</head>
<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main>
    <my-content></my-content>
  </main>
  <script>
    class MyContent extends HTMLElement {
      connectedCallback() {
        this.render('home');
      }

      adoptCallback() {
        const path = location.pathname;
        this.render(path.slice(1) || 'home');
      }

      render(page) {
        this.innerHTML = `
          <h1>${page.toUpperCase()}</h1>
          <p>This is the ${page} page</p>
        `;
      }
    }

    customElements.define('my-content', MyContent);
  </script>
</body>
</html>

在上述代码中，我们定义了一个 MyContent 元素，将其插入到一个包含导航栏和主要内容的页面中。在 adoptedCallback 中，我们根据页面的路径重新渲染了元素。

attributeChangedCallback

attributeChangedCallback 是当元素的属性值发生变化时自动触发的生命周期事件。通常，我们在 attributeChangedCallback 中根据新的属性值进行相应的操作。

下面是一个示例代码，展示了如何在 attributeChangedCallback 中实现一个简单的图片轮播器：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element</title>
</head>
<body>
  <my-carousel img-src="img1.jpg,img2.jpg,img3.jpg"></my-carousel>
  <script>
    class MyCarousel extends HTMLElement {
      static get observedAttributes() {
        return ['img-src'];
      }

      connectedCallback() {
        this.currentIndex = 0;
        this.images = this.getAttribute('img-src').split(',');
        this.render();
        setInterval(() => {
          this.currentIndex = (this.currentIndex + 1) % this.images.length;
          this.render();
        }, 3000);
      }

      attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'img-src' && oldValue !== newValue) {
          this.images = newValue.split(',');
          this.render();
        }
      }

      render() {
        const img = document.createElement('img');
        img.src = this.images[this.currentIndex];
        this.innerHTML = '';
        this.appendChild(img);
      }
    }

    customElements.define('my-carousel', MyCarousel);
  </script>
</body>
</html>

在上述代码中，我们定义了一个 MyCarousel 元素，可以根据 img-src 属性中设置的图片链接轮播展示。在 connectedCallback 中添加了一个 setInterval 定时器，每三秒钟自动切换到下一张图片。而在 attributeChangedCallback 中，我们重新根据新的图片链接进行渲染。

属性监听事件

除了生命周期事件之外，Custom Elements 还可以定义自己的属性监听事件，当指定的属性值发生变化时自动触发。

下面是一个示例代码，展示了如何在 Custom Elements 中实现属性监听事件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element</title>
</head>
<body>
  <my-button></my-button>
  <script>
    class MyButton extends HTMLElement {
      static get observedAttributes() {
        return ['disabled'];
      }

      constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `
          <button>Click me</button>
        `;
        this.button = this.shadowRoot.querySelector('button');
      }

      connectedCallback() {
        this.button.addEventListener('click', () => {
          alert('Clicked');
        });
      }

      attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'disabled') {
          this.button.disabled = newValue !== null;
        }
      }
    }

    customElements.define('my-button', MyButton);
  </script>
</body>
</html>

在上述代码中，我们定义了一个 MyButton 元素，可以根据 disabled 属性设置按钮的禁用状态。在 attributeChangedCallback 中，我们监听了 disabled 属性的变化，并根据新的属性值更新了按钮的状态。

总结

Custom Elements 中的多个监听事件可以让开发者更好地了解元素的状态变化，并在必要时进行相应的操作。在实际开发中，开发者可以根据自己的需求定义相应的监听事件，从而最大限度地发挥 Custom Elements 的优势。

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