javascripteventsaddeventlistenerremoveeventlistener

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

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.`

Solution

  • 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.