How do I remove an event listener on an event that uses an arrow function

Question

This is my example code:

    let element = document.getElementById("element")
    element.addEventListener("click", (ev)=>{
    console.log("this is where I would remove the event listener")
    })

I tried trying to find tutorials and websites telling me how to but none of them actually worked.`

also: [Removing event listener which was added with bind](https://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind) or [remove event listeners with extra arguments](https://stackoverflow.com/questions/69242724/remove-event-listeners-with-extra-arguments/69243303#69243303) — pilchard, Dec 23 '22 at 18:28
`for (handler of getEventListeners(document.getElementById("element"))) document.getElementById("element").removeEventListener('click', handler)` — Tibrogargan, Dec 23 '22 at 18:30
Isn't it an option that you give the function a name, for example `element.addEventListener("click", function example() { ... })`? — Suboptimierer, Dec 23 '22 at 18:30

score 0 · Accepted Answer · answered Dec 23 '22 at 18:52

As of Dec/2022 there are no native JavaScript methods that can be used to get event handlers that were added through .addEventListener. The most convenient way to do this is to simply keep a reference to your function:

let handler = (ev) => console.log("this is where I would remove the event listener")
let element = document.getElementById("element")
element.addEventListener("click", handler)

Then remove it:

element.removeEventListener("click", handler)

There are ways to obtain some event handlers like getEventListeners(), however they not part of the DOM specification and support is limited.

How do I remove an event listener on an event that uses an arrow function

1 Answers1