使用addEventListener监听元素属性变化时应选择什么事件类型？

普通非表单元素的自定义属性变更不会触发change事件，该事件仅针对表单元素的输入状态变更生效。要监听data-room这类普通DOM属性的变化，你可以使用浏览器原生的MutationObserver API实现：

完整实现代码 #

// 获取目标DOM元素
const container = document.getElementById('container');

// 初始化监听器，定义属性变更时的回调逻辑
const roomAttrObserver = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.attributeName === 'data-room') {
      const newRoomVal = container.dataset.room;
      // 此处填入你要执行的自定义逻辑
      console.log(`data-room 已更新为：${newRoomVal}`);
    }
  }
});

// 配置监听规则：仅监听data-room属性的变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['data-room']
};

// 启动监听
roomAttrObserver.observe(container, observerConfig);

// 后续不需要监听时可以调用以下方法销毁
// roomAttrObserver.disconnect();

可选简化方案（性能更优） #

如果data-room属性的修改完全由你自己的业务代码控制，不需要监听第三方脚本的修改，你可以直接封装属性修改函数，不需要额外监听：

function updateDataRoom(newVal) {
  container.dataset.room = newVal;
  // 直接调用你需要触发的自定义函数
  yourCustomFunc(newVal);
}

// 所有需要修改data-room的场景统一调用该方法即可
// updateDataRoom('room2')

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