如何捕获元素添加属性后的事件？已尝试window.addEventListener未生效

元素属性的添加/修改不会触发默认的全局DOM事件，所以你之前用window.addEventListener的方式无效。要监听元素属性变化，得用MutationObserver API——这是专门用来监听DOM结构或属性变化的接口。

另外注意你的代码里有个笔误：seTimeout应该改成setTimeout。

在标记为A的script区域，你可以这样写：

document.addEventListener('DOMContentLoaded', () => {
  // 等待DOM完全加载，确保能获取到myDiv元素
  const myDiv = document.getElementById('myDiv');
  
  // 创建观察者实例，定义属性变化后的回调逻辑
  const attributeObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只处理color属性的变化
      if (mutation.attributeName === 'color') {
        // 这里写你需要执行的后续操作
        console.log('color属性已添加，值为:', myDiv.getAttribute('color'));
        // 示例：把属性值应用到文本样式（因为color不是div的标准属性，不会自动生效）
        myDiv.style.color = myDiv.getAttribute('color');
      }
    });
  });

  // 配置观察选项：监听属性变化
  const observerConfig = { attributes: true };
  // 启动对myDiv的属性观察
  attributeObserver.observe(myDiv, observerConfig);
});

如果你的后续操作只需要执行一次，在回调里处理完后可以调用attributeObserver.disconnect()来停止观察，避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者R.Koch