如何为动态追加的mic-button元素的classList变化添加原生JS监听器

使用浏览器原生MutationObserverAPI即可完成需求，无jQuery依赖，实现代码如下：

完整代码 #

// class变化时要触发的目标函数
function foo() {
  console.log('mic-button类列表已更新');
}

// class变动的回调处理
function handleClassMutations(mutationList) {
  // 仅当存在class属性的实际变动时触发逻辑
  const hasClassUpdate = mutationList.some(record => record.attributeName === 'class');
  if (hasClassUpdate) {
    foo();
  }
}

// 目标元素为动态插入，先监听文档节点插入动作，等待目标元素出现
const insertObserver = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const addedNode of mutation.addedNodes) {
      // 跳过文本、注释等非元素节点
      if (addedNode.nodeType !== Node.ELEMENT_NODE) continue;

      // 匹配目标：插入节点本身是.mic-button，或是包含.mic-button的父级
      const targetEl = addedNode.matches('.mic-button')
        ? addedNode
        : addedNode.querySelector?.('.mic-button');

      if (targetEl) {
        // 为目标元素绑定class属性监听
        new MutationObserver(handleClassMutations).observe(targetEl, {
          attributes: true,
          attributeFilter: ['class'], // 仅监听class属性，过滤其他属性的无效触发
          subtree: false // 仅追踪元素本身的class变动，不监听子元素属性
        });

        // 单实例场景：找到目标后停止插入监听，降低性能损耗
        // 多实例动态插入场景：注释掉下行代码，可为后续新增的所有.mic-button绑定监听
        insertObserver.disconnect();
      }
    }
  }
});

// 启动文档节点插入监听
insertObserver.observe(document.body, {
  childList: true,
  subtree: true // 覆盖所有层级的节点插入动作
});

关键说明 #

• MutationObserver为浏览器原生DOM变动监听能力，兼容所有现代浏览器、IE11及以上版本，无需额外引入第三方库。
• 配置attributeFilter: ['class']可大幅减少无效回调，避免监听id、自定义data属性等其他属性变动带来的额外性能开销。
• 相比轮询检查class值的方案，MutationObserver由浏览器原生调度，性能开销远低于手动定时器轮询。

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