如何为自定义元素（Custom Element）添加回调函数？

你遇到的核心问题是Custom Element的实例由浏览器/框架在解析DOM时自动创建，手动new出来的实例并不会被实际使用，所以构造函数里的回调参数根本传不到真正工作的实例上。以下是几种靠谱的解决方法：

方法1：使用原生自定义事件（推荐） #

这是Web组件的标准解耦方案，组件内部触发自定义事件，应用层监听该事件即可，完全不用依赖实例引用的传递。

组件代码示例： #

class DropDown extends HTMLElement {
  constructor() {
    super();
    this._selectElement = this.querySelector('select');
    this._selectElement.addEventListener('change', this._handleChange.bind(this));
  }

  _handleChange(e) {
    const selectedValue = e.target.value;
    // 触发自定义事件，携带选中值
    this.dispatchEvent(new CustomEvent('dropdown-select', {
      detail: { value: selectedValue },
      bubbles: true, // 允许事件冒泡，方便父元素监听
      cancelable: true
    }));
  }
}
customElements.define('my-dropdown', DropDown);

应用层代码： #

// 获取框架创建的真实实例
const dropdown = document.querySelector('my-dropdown');
// 监听自定义事件
dropdown.addEventListener('dropdown-select', (event) => {
  console.log('选中的值:', event.detail.value);
  // 这里写你的回调逻辑
});

方法2：直接给元素实例绑定回调属性 #

在组件类里定义一个可赋值的回调属性，触发事件时调用该属性对应的函数。

组件代码示例： #

class DropDown extends HTMLElement {
  constructor() {
    super();
    this._selectElement = this.querySelector('select');
    this._selectElement.addEventListener('change', this._handleChange.bind(this));
    // 初始化回调为空
    this.onSelect = null;
  }

  _handleChange(e) {
    const selectedValue = e.target.value;
    // 如果onSelect已赋值，执行它
    if (typeof this.onSelect === 'function') {
      this.onSelect(selectedValue);
    }
  }
}
customElements.define('my-dropdown', DropDown);

应用层代码： #

const dropdown = document.querySelector('my-dropdown');
// 直接给实例的onSelect属性赋值
dropdown.onSelect = (value) => {
  console.log('选中值:', value);
  // 处理逻辑
};

方法3：实现回调注册方法 #

在组件内部维护一个回调列表，提供注册方法让应用层添加回调，适合需要多个回调的场景。

组件代码示例： #

class DropDown extends HTMLElement {
  constructor() {
    super();
    this._selectElement = this.querySelector('select');
    this._selectElement.addEventListener('change', this._handleChange.bind(this));
    // 存储回调函数的数组
    this._callbackList = [];
  }

  // 注册回调的方法
  addSelectCallback(callback) {
    if (typeof callback === 'function') {
      this._callbackList.push(callback);
    }
  }

  _handleChange(e) {
    const selectedValue = e.target.value;
    // 遍历执行所有回调
    this._callbackList.forEach(callback => callback(selectedValue));
  }
}
customElements.define('my-dropdown', DropDown);

应用层代码： #

const dropdown = document.querySelector('my-dropdown');
dropdown.addSelectCallback((value) => {
  console.log('第一个回调:', value);
});
dropdown.addSelectCallback((value) => {
  console.log('第二个回调:', value);
});

内容的提问来源于stack exchange，提问作者Stobber