如何检测click事件何时被移除？动态DOM事件失效排查

Great question—tracking down when an event listener gets unbound from dynamic elements can feel like a needle-in-a-haystack problem, but browser dev tools and a few clever workarounds make it totally solvable. Let’s walk through the most effective ways to pinpoint the issue:

1. Use DOM Breakpoints to Catch Attribute Modifications #

This is my top pick for zero-effort tracking of element changes:

• Open your browser’s DevTools (F12 or Ctrl+Shift+I), go to the Elements panel, and find your dynamic <div> or <img> element.
• Right-click the element, hover over Break on, then select Attributes modifications.
• This will pause execution every time any attribute (including jQuery-bound event handlers) is changed or removed on that element. When the breakpoint triggers, check the call stack to see exactly which script is modifying the element—this will lead you straight to the code that’s removing your click handler.

2. Monkey-Patch removeEventListener to Log All Calls #

If you suspect the event is being removed via native methods (or jQuery’s .off(), which uses removeEventListener under the hood), you can override the method to log every invocation:

// Run this in your browser console before your problematic code executes
const originalRemoveListener = Element.prototype.removeEventListener;
Element.prototype.removeEventListener = function(type, listener) {
  console.log(`removeEventListener fired on:`, this, `Event type:`, type);
  console.trace(); // Prints the full call stack so you see where the call came from
  originalRemoveListener.call(this, type, listener);
};

Every time an event listener is removed from any element, you’ll get a console message with the element, event type, and a trace of exactly which line of code triggered the removal. For jQuery-specific unbinding, you could also patch $.fn.off() using the same logic.

3. Sanity Check: Rule Out Event Propagation Issues #

Wait—before assuming the listener was removed, make sure the click event is actually reaching your div. If your <img> has its own click handler that runs e.stopPropagation(), it would block the parent div’s handler from firing. Test this quickly by binding a direct click handler to the img:

$('img').click(() => console.log('Img was clicked!'));

If this logs to the console but your div’s handler still doesn’t fire, propagation is the issue—not a removed listener.

4. Inspect Active Event Listeners in DevTools #

At any point, you can verify which listeners are still attached to your element:

• In the Elements panel, select your div or img, then look for the Event Listeners tab on the right-hand side.
• Expand the click event to see all active handlers. If your handler is missing here, you know it’s been unbound; if it’s still present, the problem likely lies with event delegation or propagation instead.

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