如何监听div的类添加事件？添加passed类时执行指定JS函数

针对你的需求——监听id为1的div，当它被添加passed类时执行fill()函数，这里有个可靠的原生解决方案：

使用MutationObserver API（推荐） #

这是现代浏览器原生支持的DOM监听方案，能精准捕获元素的属性变化，性能也不错。直接上代码：

// 获取目标div元素
const targetDiv = document.getElementById('1');

// 你定义的待执行函数
function fill() { 
  jQuery('#check').show(); 
  jQuery('#check-val').hide(); 
}

// 创建MutationObserver实例，处理变化回调
const classObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只关注class属性的变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // 检查元素是否已添加passed类
      if (targetDiv.classList.contains('passed')) {
        fill();
        // 若只需触发一次，可在这里停止监听：classObserver.disconnect();
      }
    }
  });
});

// 启动监听，仅监听class属性变化
classObserver.observe(targetDiv, {
  attributes: true,
  attributeFilter: ['class'] // 过滤只监听class，减少不必要的回调
});

补充说明 #

• 这个观察者会持续监听目标div的class属性变化，一旦检测到passed类被添加，就立即执行fill()函数
• 如果你的场景只需要触发一次（比如passed类只会被添加一次），可以取消注释回调里的classObserver.disconnect()，这样函数执行后就会停止监听，避免不必要的性能消耗
• 兼容性：支持Chrome、Firefox、Edge、Safari 6.1+等所有现代浏览器，完全满足绝大多数项目需求

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