How Can I Pass Arguments to an `addEventListener` Listener Function in JavaScript?

Passing Arguments to addEventListener Listener Function

In certain scenarios, it may be necessary to pass arguments to the listener function of the addEventListener. The following code snippet highlights a common situation where this may be required:

var someVar = some_other_function();
someObj.addEventListener("click", function() {
  some_function(someVar);
}, false);

In this instance, someVar is defined outside the listener function but is intended to be utilized within it. However, due to JavaScript's scoping rules, someVar may be recognized as a new variable inside the listener function.

Solution: Retrieving Arguments from Event Target

Instead of attempting to pass arguments directly to the listener function, consider obtaining them from the event.target attribute. This approach involves adding custom properties to the target of the event.

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt) {
  window.alert(evt.currentTarget.myParam);
}

In this example, a button element is assigned an event listener function called myFunc. A custom property, myParam, is added to the button and set to a specific value ('This is my parameter').

When the button is clicked, the myFunc function is executed with the event object as a parameter. By accessing the event.currentTarget property and then the custom myParam property, the value ('This is my parameter') can be retrieved and displayed.

This technique allows for the passing of arguments to event listener functions in a more convenient and reliable manner.

The above is the detailed content of How Can I Pass Arguments to an `addEventListener` Listener Function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!