如何监听DOM树中任意元素的非冒泡事件？以图片load事件为例

可以实现，但由于load事件属于非冒泡事件，无法通过常规的事件委托（比如在document上监听）捕获所有图片的load事件。我们需要结合MutationObserver来监听DOM中新增的图片元素，同时处理页面初始已存在的图片，具体实现如下：

核心思路 #

通过MutationObserver监听DOM树的变化，捕获所有新增的<img>元素，为它们绑定load事件；同时遍历页面初始存在的图片，确保不会漏掉已加载或正在加载的图片。

1. 处理页面已存在的图片 #

先获取当前页面所有图片，逐个绑定load事件，同时判断图片是否已加载完成，避免错过已加载的图片：

// 处理图片load事件的通用函数
function handleImageLoad(img) {
  // 图片已加载完成的情况
  if (img.complete) {
    console.log('图片已加载:', img.src);
  } else {
    // 图片未加载完成，绑定load事件
    img.addEventListener('load', () => {
      console.log('图片加载完成:', img.src);
    });
  }
}

// 遍历页面初始所有图片
document.querySelectorAll('img').forEach(handleImageLoad);

2. 监听新增的图片元素 #

使用MutationObserver监听整个文档的DOM变化，当有新的图片元素被添加时，立即为其绑定load事件：

// 创建MutationObserver实例
const imgObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach((node) => {
      // 如果是img元素，直接处理
      if (node.tagName === 'IMG') {
        handleImageLoad(node);
      }
      // 如果是包含子元素的容器，递归查找内部的img
      else if (node.nodeType === Node.ELEMENT_NODE && node.children.length > 0) {
        node.querySelectorAll('img').forEach(handleImageLoad);
      }
    });
  });
});

// 配置监听选项：监听body下的子节点添加和子树变化
imgObserver.observe(document.body, {
  childList: true,
  subtree: true
});

3. 额外注意点 #

• 如果需要处理图片动态修改src的场景（比如切换图片），可以额外配置MutationObserver监听img元素的src属性变化，触发时重新绑定load事件。
• 当不需要监听时，调用imgObserver.disconnect()停止监听，避免内存泄漏。

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