如何绑定EventListener监听元素data-src变更为src的时机

推荐使用MutationObserver接口监听目标iframe元素的属性变化，这是目前监听DOM节点属性动态修改的最高效、最标准的方案，不会侵入第三方逻辑，也不会有轮询带来的性能损耗。

具体实现逻辑 #

• 无需监听data-src的变化，直接监听src属性的变更即可匹配你需要的触发时机
• 可以通过属性过滤配置仅监听src属性变化，减少不必要的回调触发，提升性能
• 监听逻辑完全不依赖第三方代码的实现逻辑，只要iframe的src属性发生修改就能触发回调，兼容性覆盖所有现代浏览器，IE11也可正常支持
• 不需要监听时可手动销毁实例，避免内存泄漏

示例代码 #

// 注意如果是用jQuery获取的iframe对象，需要加[0]转成原生DOM节点
const iframe = videoWrapper.html(videoElement).children('iframe')[0];

// 实例化观察器，定义变化触发的回调逻辑
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.attributeName === 'src') {
      const currentSrc = iframe.getAttribute('src');
      // 此处添加你需要的条件判断
      if (currentSrc && currentSrc.trim() !== '') {
        // 执行对应的业务方法
        console.log('src属性已更新：', currentSrc);
        // yourCustomFunction()
      }
    }
  }
});

// 启动监听，配置仅监听属性变化且只过滤src属性
observer.observe(iframe, {
  attributes: true,
  attributeFilter: ['src']
});

// 可选：不需要监听时销毁实例
// observer.disconnect()

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