How do I know that removeEventListener was successful?

Question

Is there a way to confirm that removeEventListener was successful? I'm using it on a video element for the "playing"/"pause" event. The behavior I'm trying to achieve seems to be inconsistent. Here is an example of how I'm using it.

var playListener = function(){
  console.log("video is playing") 
}

videoElement.addEventListener("playing", playListener)

Somewhere else in my code

videoElement.removeEventListener("playing", playListener)

playListener is available where I'm using removeEventListener and I'm passing around the video element's id so it is the same videoElement I added the event listener to.

I want to know if I can do some kind of console.log or something to confirm that the removeEventListener worked.

Answer 1

Unfortunately, the removeEventListener method doesn't return anything or throw an error when it does not successfully remove an event listener. There's also no JavaScript method to access what event listeners are currently set for a given element.

As far as debugging your issue, most modern browser's developer tools do provide the capability to view event listeners. You can put a debugger statement in your code (or set a breakpoint) to pause execution immediately before you've called removeEventListener:

debugger;
videoElement.removeEventListener("playing", playListener);

Once the breakpoint is reached and execution is paused, check the event listeners from Chrome Dev Tools' Elements tab to verify that your event listener is currently set:

You can also find event listeners in Firefox Dev Tools' Inspector tab:

After verifying that your event listener is currently set, go back to the debugger (Chrome "Sources" Tab / Firefox "Debugger" Tab) and step through the code (F10) line by line.

After your call to removeEventListener is made, go back and check your event listeners again. If it was successful, your event listener should no longer be set. Once you're done debugging, you can then resume code execution (F8).