Event listeners are a very important part of web development. From mouse clicks to keyboard presses and event touch events. These event listeners help make our applications interactive. And while it may be easy to add them in javascript, it isn’t exactly straightforward when it comes to removing them. Especially when parameters are involved.

In this tutorial, I am going to be showing you how you can add and remove Event Listeners with Parameters in javascript. Let’s begin.

How most Event Listeners are added

Most times, this is how event listeners are added:

  1. Using anonymous functions and arrow functions

Anonymous functions:

var button = document.querySelector(".button");

button.addEventListener("click", function () {
  console.log("hello world");
});

Arrow functions:

var button = document.querySelector(".button");

button.addEventListener("click", function () {
  console.log("hello world");
});
  1. Passing a reference to the event handler
var button = document.querySelector(".button");

button.addEventListener("click", clickHandler);

function clickHandler() {
  console.log("hello world");
}

While the above methods are great, they don’t really allow you to add and remove event listeners with parameters. These methods can work well when you want to only add event listeners to HTML elements without removing them. In cases where you also need to remove the event listeners, it wouldn’t be the best option.

Here’s why..

In order to remove event listeners from HTML elements, you need to use the removeEventListener method. This is the syntax for the removeEventListener method:

target.removeEventListener(type, listener);

where the:

target: is the HTML element to which the event listener was added.

type: is the type of event that the listener is listening for.

listener: is the event handler function that was added to the event listener.

And as you can see, if you had chosen our first way of adding event listeners (using arrow functions and anonymous functions), it would have been impossible to remove them. Because using this method, our functions will have no name which we can pass to removeEventListener in order to remove our event.

Likewise, if we had used the second way of adding event listeners (passing a reference to the event handler), we would still face a challenge - we wouldn’t be able to pass our arguments into our function.

How to add and remove Event Listeners with Parameters

So in order to remove our event listeners with parameters, this is one way you could do it:

  1. Add the event handler to the button (or any other HTML element).
  2. Create the function with parameters (the function you want to run when the event happens).
  3. Call the just-created function inside the event handler and pass the required arguments

Here is what I mean:

1. Add the event handler

const button = document.querySelector(".button");
button.addEventListener("click", eventHandler);

2. Create the function with parameters.

const button = document.querySelector(".button");
button.addEventListener("click", eventHandler);

// function with parameters
function ourFunction(firstParameter, secondParameter, thirdParameter) {
  console.log(
    "I can count from " +
      firstParameter +
      " to " +
      thirdParameter +
      " without skipping " +
      secondParameter
  );

3. Call the just-created function inside the event handler

const button = document.querySelector(".button");
button.addEventListener("click", eventHandler);

// the event handler
function eventHandler() {
  ourFunction(1, 2, 3);
}

// function with parameters
function ourFunction(firstParameter, secondParameter, thirdParameter) {
  console.log(
    "I can count from " +
      firstParameter +
      " to " +
      thirdParameter +
      " without skipping " +
      secondParameter
  );
}

From the above code, you can see that we can now call our function in a way that it allows us to include our arguments.

Now, when you want to remove the event listener, all you have to do is pass the name of the event handler that was added to the button, to the removeEventListener method. Like this:

button.removeEventListener("click", eventHandler);

So, that’s how you do it.

Please let me know if any part of this explanation isn’t clear enough.

Ciao!