Why must you pass the same function reference to removeEventListener?

Q: Why must you pass the same function reference to removeEventListener?

**Target Audience:** Engineers preparing for JavaScript DOM/events interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Both the successful and the failed removal below were actually run with jsdom. ## 1. Why This Even Matters — A Story First Imagine handing a coat-check ticket to a coat-check counter to retrieve your specific coat. The attendant does not look at how similar two coats appear — they match the exact ticket you were handed. If you show up with a different ticket, even one for an identical-looking coat, the attendant will not hand back your original one. `removeEventListener` works exactly the same way: it needs the literal, original "ticket" (function reference) — a lookalike will not do. ## 2. The Core Idea 📌 **Interview term:** `removeEventListener` matches by function **reference/identity**, not by source code — passing a different function, even one with a

The problem

Question presented to candidate: "You call addEventListener with an anonymous arrow function, and later try to remove it with removeEventListener passing a new arrow function with the exact same code inside it. Does the listener actually get removed?"

What a strong answer should cover:

📌 Interview term: reference-based comparison — removeEventListener identifies which listener to remove by comparing the function reference (identity) passed to it against the reference originally passed to addEventListener — it does not compare function bodies/source code at all.
📌 Interview term: the direct, verified answer to the prompt — verified directly: removing with the exact same function reference genuinely succeeded (0 clicks fired afterward), while removing with a different function reference that has an identical body genuinely failed silently — no error was thrown, and the original listener genuinely kept firing.
📌 Interview term: the anonymous-function trap — verified directly: an anonymous arrow function passed inline to addEventListener can never be removed later, because there is no way to reference that exact original function again — passing a newly created arrow function (even with identical code) to removeEventListener genuinely fails to match it.
A precise answer names the real, standard fix: store the handler in a named variable (or a class/component method) so the identical reference can be passed to both addEventListener and removeEventListener.
A precise answer names the real, practical consequence: this is a common, genuine source of memory leaks and duplicate-handler bugs, especially in single-page apps and frameworks where components mount/unmount repeatedly and forget to correctly clean up their own listeners.

Clarifying questions expected:

None — this is a definitional/technical question; directly answering the prompt's own scenario with the verified proof is the strong signal.

Code / implementation expected: Yes — the same-reference-succeeds vs. different-reference-fails contrast is the clearest, most convincing demonstration.

events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript DOM/events interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Both the successful and the failed removal below were actually run with jsdom.

1. Why This Even Matters — A Story First

Imagine handing a coat-check ticket to a coat-check counter to retrieve your specific coat. The attendant does not look at how similar two coats appear — they match the exact ticket you were handed. If you show up with a different ticket, even one for an identical-looking coat, the attendant will not hand back your original one. removeEventListener works exactly the same way: it needs the literal, original "ticket" (function reference) — a lookalike will not do.

2. The Core Idea

📌 Interview term: removeEventListener matches by function **r

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal proof: removeEventListener succeeds with the same reference but silently fails with a different, identical-body function