How to pass arguments to addEventListener listener function?

javascript dom addeventlistener
Abhishek Yadav picture Abhishek Yadav · Nov 2, 2008 · Viewed 486.7k times · Source

The situation is somewhat like-

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

The problem is that the value of someVar is not visible inside the listener function of the addEventListener, where it is probably being treated as a new variable.

Answer

Zaloz picture Zaloz · Aug 16, 2012

Why not just get the arguments from the target attribute of the event?

Example:

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

JavaScript is a prototype-oriented language, remember!

Related questions

Simple event listener not working - JS

I have written an increbily simple event listener and yet it comes up with the error: Uncaught TypeError: Cannot call method 'addEventListener' of null which suggests it is to do with the id maybe (also it works with document? <…

Read More
$(document).on() in plain JavaScript?

In jQuery there is .on() which can be used as: $(document).on('click', '.foo', function() { /* ... */ }); This listens for click events on all DOM elements with the class .foo. However, this also listens for any eventual elements added to the …

Read More
How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More