如何在指定class动态元素出现时触发JavaScript函数play()？

这问题我熟，刚好可以用MutationObserver来解决动态DOM的监听需求，而且要确保每个sound元素只触发一次play()函数对吧？我给你拆解下实现步骤：

核心思路 #

我们需要监听#canvas容器内的DOM变化，捕捉新增的.sound元素，同时用一个集合记录已经处理过的元素，避免重复执行函数。

具体实现代码 #

1. 初始化监听与去重集合 #

// 用Set存储已处理的.sound元素，确保每个元素只触发一次play
const processedSounds = new Set();
// 获取目标容器
const canvas = document.getElementById('canvas');

// 创建MutationObserver实例，处理DOM变化回调
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 只处理新增节点的情况
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach((node) => {
        // 检查当前节点是否是.sound元素，或包含.sound子元素
        let soundElements;
        if (node.classList?.contains('sound')) {
          soundElements = [node];
        } else {
          soundElements = node.querySelectorAll?.('.sound') || [];
        }

        // 处理每个符合条件的元素
        soundElements.forEach((soundEl) => {
          if (!processedSounds.has(soundEl)) {
            // 提取span内的文本作为play函数的参数
            const soundName = soundEl.textContent.trim();
            // 执行目标函数
            play(soundName);
            // 标记为已处理，避免重复触发
            processedSounds.add(soundEl);
          }
        });
      });
    }
  });
});

2. 启动监听 #

// 配置监听规则：监听子节点变化，同时监听子树（防止.sound元素通过父节点嵌套添加）
const observerConfig = {
  childList: true,
  subtree: true
};

// 开始监听#canvas的DOM变化
observer.observe(canvas, observerConfig);

3. 处理页面加载时已存在的元素 #

如果页面初始化时#canvas里已经有.sound元素，别忘了先处理这些：

// 初始化检查已存在的.sound元素
const existingSounds = canvas.querySelectorAll('.sound');
existingSounds.forEach((soundEl) => {
  if (!processedSounds.has(soundEl)) {
    const soundName = soundEl.textContent.trim();
    play(soundName);
    processedSounds.add(soundEl);
  }
});

额外说明 #

• MutationObserver是浏览器原生API，性能远优于定时轮询（比如setInterval），只会在DOM真的变化时触发回调。
• 用Set做去重标记是因为它的查找、添加操作都是O(1)的高效操作，比数组更适合这个场景。
• 如果后续需要停止监听，只需要调用observer.disconnect()即可。

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