How to pass parameters to JavaScript event listeners

This article explains how to pass parameters to event listeners in JavaScript.

I don’t know how to pass parameters to event listeners in JavaScript. Could you please tell me the steps?

Use addEventListener to pass parameters to the event listener. 
Also, by using handleEvent, there is no need to specify the function name and it can be passed directly to the third argument.

How to pass parameters to event listeners

An event listener is a function that is called when a specific event occurs. For example, if you want to set up a function to be called when a button is clicked, you need to add an event listener to the button element.

Next, passing parameters to event listeners can basically be accomplished using anonymous functions.

1. Set the event listener using addEventListener(). This example retrieves a button element named button.

let button = document.querySelector('button');

2. Create an anonymous function to pass parameters to the event listener.

button.addEventListener('click', function(event) {
  // Describe the process in an anonymous function
});

Specify the anonymous function as the second argument of addEventListener(). Inside this anonymous function, write the process to which you want to pass parameters.

3. Specify the parameters you want to pass as arguments within the anonymous function.

button.addEventListener('click', function(event, param) {
  // Describe the process in an anonymous function
});

Add parameters to the argument. Here, we named the parameter param.

4. Pass the anonymous function to the third argument of addEventListener().

button.addEventListener('click', function(event) {
  handleClick(event, 'hello');
});

Finally, pass the anonymous function created above to the third argument of addEventListener(). Also, by specifying a value for a parameter, you can use the parameter within an anonymous function.

Introduction to sample program

Below is a sample program.

let button = document.querySelector('button');

function handleClick(event, param) {
  console.log(event); // event object
  console.log(param); // parameter
}

button.addEventListener('click', function(event) {
  handleClick(event, 'hello');
});

In this example, the handleClick() function is called when the click event occurs. The handleClick() function outputs the event object and parameter values ​​to the console using console.log().

Have a handleEvent method that corresponds to the listener function

handleEvent() is a general-purpose method that can be used in event listeners. By using handleEvent(), there is no need to specify the function name and it can be passed directly to the third argument of addEventListener().

Below is an example using handleEvent().

const obj = {
  name: 'JavaScript',
  handleEvent(event) {
    console.log(`Hello, ${this.name}!`);
    console.log(`Type: ${event.type}`);
    console.log(`Target: ${event.target}`);
  }
}

const button = document.querySelector('button');
button.addEventListener('click', obj);

In this example, the handleEvent() method is defined within the obj object. Inside the handleEvent() method, the name property of the obj object and the type and target of the received event object are output to the console.

The obj object is passed to the third argument of addEventListener(), but in this case the handleEvent() method is called.

You can simplify your code by using handleEvent(). Also, by using this method, you can save yourself the trouble of defining a function to be passed to addEventListener() every time.

This concludes the explanation of handleEvent(). You can write simpler code by using handleEvent().

summary

We explained how to pass parameters to event listeners.

I now understand how to pass parameters to event listeners. 
thank you.

You can use anonymous functions to pass parameters to event listeners. 
You can also pass values ​​other than event objects to parameters.

Also, when passing a function directly to the third argument of addEventListener(), you can pass a function with no arguments, so be careful not to pass unnecessary arguments.