如何在JS/jQuery中监听event removal，定位元素点击事件的删除位置？

当绑定的点击事件在页面加载后消失，大概率是被代码主动移除，或是元素本身被替换了。以下是几个直接有效的排查方法：

1. 重写jQuery的事件移除方法，抓调用栈 #

jQuery移除事件主要用off()或旧版的unbind()，我们可以给这些方法加个“钩子”，当目标元素的事件被移除时打印调用栈，直接找到代码位置：

// 把这段代码放在你的事件绑定代码之前执行
// 监听off方法
const originalOff = $.fn.off;
$.fn.off = function(...args) {
  if (this.is('#id-name')) {
    console.log('目标元素的off()被调用，参数:', args);
    console.trace(); // 打印完整调用栈，直接定位调用代码
  }
  return originalOff.apply(this, args);
};

// 如有旧代码用unbind，也监听一下
const originalUnbind = $.fn.unbind;
$.fn.unbind = function(...args) {
  if (this.is('#id-name')) {
    console.log('目标元素的unbind()被调用，参数:', args);
    console.trace();
  }
  return originalUnbind.apply(this, args);
};

2. 用Chrome调试器的事件断点 #

直接利用浏览器的调试工具，不用改代码就能抓：

• 打开Chrome DevTools的Sources面板
• 右侧找到「Event Listener Breakpoints」，展开「DOM Events」，勾选removeEventListener——jQuery的off底层会调用这个原生方法，触发时自动断点，看调用栈就能找到源头
• 另外如果是元素被删除导致事件消失，勾选DOMNodeRemoved，元素被移除时会断点；也可以右键元素面板里的目标元素，选「Break on」→「Subtree modifications」，元素被替换渲染时自动断点

3. 检查元素是否被重新渲染 #

有时候事件没被移除，只是原来的元素被新元素替换了（比如模板渲染、innerHTML更新），新元素没绑定事件。用上面的「Break on Subtree modifications」就能抓到元素被替换的时机，定位到重新渲染的代码。

4. 针对特定事件加移除监听 #

如果只想监听click事件的移除，可以扩展jQuery的事件系统：

$.event.special.click = $.event.special.click || {};
// 保存原有的teardown方法
$.event.special.click.originalTeardown = $.event.special.click.teardown;
$.event.special.click.teardown = function(namespaces) {
  if (this.id === 'id-name') {
    console.log('目标元素的click事件被移除，命名空间:', namespaces);
    console.trace();
  }
  return $.event.special.click.originalTeardown?.apply(this, arguments) || true;
};

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