[Deprecation]Listener added for a 'DOMNodeRemovedFromDocument' mutation event. T...

2026年09月28日 15:43 9.41 秒 success

错误信息

[Deprecation]Listener added for a 'DOMNodeRemovedFromDocument' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead. See https://chromestatus.com/feature/5083947249172480 for more information.

AI 解决方案

⚠️ 报错分析

原文:[Deprecation]Listener added for a 'DOMNodeRemovedFromDocument' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead.
译文:[弃用警告]已为 'DOMNodeRemovedFromDocument' 变异事件添加监听器。此事件类型已被弃用,并将很快从浏览器中移除。目前使用此事件监听器会导致性能问题,并存在网站即将损坏的重大风险。建议改用 MutationObserver。

🎯 原因分析


代码中监听了已被浏览器标记为弃用的 DOMNodeRemovedFromDocument 变异事件。现代浏览器不再推荐使用此类旧版 DOM 事件,且即将移除支持,继续使用会导致性能下降并存在兼容性风险。

💡 解决方案


改用 MutationObserver API 替代旧事件监听,示例如下:

// 旧版代码(已弃用)
// document.addEventListener('DOMNodeRemovedFromDocument', (event) => {
//   console.log('节点从文档中移除:', event.target);
// });

// 推荐使用MutationObserver
const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      mutation.removedNodes.forEach(node => {
        console.log('节点从文档中移除:', node);
      });
    }
  }
});

// 配置观察选项:监听子节点移除,并设置子树扩展以覆盖深层变动
observer.observe(document.body, {
  childList: true,
  subtree: true
});

🛡️ 预防措施


  • 统一使用MutationObserver:处理DOM变动时,优先选择现代的 MutationObserver,避免依赖已弃用的旧事件

  • 定期检测警告:开发时启用浏览器严格警告模式,使用工具(如ESLint插件)检测弃用API的使用