How to remove an event listener?

To remove an event listener in JavaScript, you use the removeEventListener method. This method requires two arguments: the type of the event and the function that was originally used as the event handler.

Here’s how to do it:

Define the Event Handler Function: First, you need to define the function that will handle the event. This function must be a named function or a reference to a function, not an anonymous function.
Add the Event Listener: Use addEventListener to attach the event listener to the desired element.
Remove the Event Listener: Call removeEventListener with the same event type and function reference.

Here’s an example:

<button id="myButton">Click Me</button>
<script>
    // Step 1: Define the event handler function
    function handleButtonClick() {
        alert("Button clicked!");
    }

    // Step 2: Add the event listener
    const button = document.getElementById("myButton");
    button.addEventListener("click", handleButtonClick);

    // Step 3: Remove the event listener
    button.removeEventListener("click", handleButtonClick);
</script>

Important Notes:

The function passed to removeEventListener must be the same function reference that was used in addEventListener. If you use an anonymous function in addEventListener, you cannot remove it later because there is no reference to that function.
If you want to remove an event listener after a certain condition or action, you can do so by calling removeEventListener at that point in your code.