MutationObserver先监听父元素后监听子元素无触发事件问题咨询

现有代码的问题 #

你当前的监听逻辑存在根本性的偏差：childList: true配置的作用是监听目标元素的直接子节点的增删变化，而非监听目标元素自身的移除事件。

• 你监听父元素时，父元素的子节点（即你要监听的子元素）被删除时，父元素的observer会触发，所以第一次监听有响应
• 你直接监听子元素时，只有子元素自己的子节点被删除才会触发回调，子元素本身被父节点删除时，这个监听完全不会触发，这就是你第二次监听无响应的核心原因

方案对比 #

• 废弃的DOMNodeRemoved事件完全不推荐使用：这类Mutation Event本身是同步触发，会严重阻塞DOM操作性能，且已经从Web标准中移除，随时可能在新浏览器版本中失效，兼容性风险极高
• 全局document级别的MutationObserver方案可行性很高，完全不存在你担心的问题：
  • MutationObserver是异步批量回调，本身性能开销极低，只要回调逻辑不做重度计算，完全不会影响页面性能
  • 不同库注册的MutationObserver完全独立，不会互相覆盖或干扰，不存在冲突问题

最优实现方案 #

封装单例全局监听，内部维护需要监听移除事件的节点集合，不需要额外维护父子节点的监听状态，直接调用即可监听任意节点的自身移除事件：

// 单例全局监听，只初始化一次
const removeObserver = (() => {
  // 存储需要监听移除的节点，key是节点，value是触发的回调，WeakMap自动避免内存泄漏
  const targetMap = new WeakMap();

  const observer = new MutationObserver((mutations) => {
    // 遍历所有变更记录
    for (const mutation of mutations) {
      // 遍历所有被移除的节点
      for (const removedNode of mutation.removedNodes) {
        // 只处理元素节点
        if (removedNode.nodeType !== Node.ELEMENT_NODE) continue;
        // 如果当前移除的节点在监听集合里，触发回调
        if (targetMap.has(removedNode)) {
          const callback = targetMap.get(removedNode);
          callback(removedNode);
          targetMap.delete(removedNode); // 触发后移除监听，不需要可注释
        }
        // 检查移除节点的子节点有没有被监听的，父节点被移除时子节点也会连带被移除
        removedNode.querySelectorAll('*').forEach(node => {
          if (targetMap.has(node)) {
            const callback = targetMap.get(node);
            callback(node);
            targetMap.delete(node);
          }
        })
      }
    }
  });

  // 全局监听document的所有子节点变化，包含子树
  observer.observe(document, {
    childList: true,
    subtree: true
  });

  return {
    // 对外暴露的监听方法，传入要监听的节点和移除时的回调
    onRemove(node, callback) {
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      targetMap.set(node, callback);
    },
    // 取消监听
    offRemove(node) {
      targetMap.delete(node);
    }
  }
})();

使用方式 #

// 监听父元素移除
removeObserver.onRemove(parentElement, (node) => {
  console.log('父元素被移除了', node);
});
// 监听子元素移除
const child = parentElement.querySelector('someChildElement');
removeObserver.onRemove(child, (node) => {
  console.log('子元素被移除了', node);
});

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