Javascript event handler with parameters

Question

I want to create an eventHandler that passes an event and some parameters. The problem is that the function does not receive the element. Here is an example:

doClick = function(func){ var elem = .. // the element where it is all about elem.onclick = function(e){ func(e, elem); } } doClick(function(e, element){ // do stuff with element and the event }); 

The element 'elem' must be defined outside of the anonymous function. How can I get the passed item for use in an anonymous function? Is there any way to do this?

What about addEventListener? It seems I can not pass the event through addEventListener at all?

Update

I seem to have solved the problem with 'this'

 doClick = function(func){ var that = this; this.element.onclick = function(e){ func(e, that); } } 

Where does it contain this.element, which I can access in the function.

AddEventListener

But I'm curious about addEventListener:

 function doClick(elem, func){ element.addEventListener('click', func(event, elem), false); } 

Answer 1

I don’t quite understand what your code is trying to do, but you can make variables available in any event handler, taking advantage of function closures:

 function addClickHandler(elem, arg1, arg2) { elem.addEventListener('click', function(e) { // in the event handler function here, you can directly refer // to arg1 and arg2 from the parent function arguments }, false); } 

Depending on your specific coding situation, you can almost always make some kind of closure to keep access to the variables for you.

From your comments, if what you are trying to do is:

 element.addEventListener('click', func(event, this.elements[i])) 

You can then do this with a self-executing function (IIFE) that captures the required arguments in the closure as it executes and returns the actual event handler function:

 element.addEventListener('click', (function(passedInElement) { return function(e) {func(e, passedInElement); }; }) (this.elements[i]), false); 

For more information on how IIFE works, see these other links:

Javascript wrapping code inside an anonymous function

Expression with immediate function call (IIFE) in JavaScript - jQuery Pass

What are some good use cases for self-executing anonymous JavaScript functions?

This latest version may be easier to see that it does so:

 // return our event handler while capturing an argument in the closure function handleEvent(passedInElement) { return function(e) { func(e, passedInElement); }; } element.addEventListener('click', handleEvent(this.elements[i])); 

---

You can also use .bind() to add arguments to the callback. Any arguments you pass .bind() will be added before the arguments that the callback itself will have. So you can do this:

 elem.addEventListener('click', function(a1, a2, e) { // inside the event handler, you have access to both your arguments // and the event object that the event handler passes }.bind(elem, arg1, arg2)); 

Answer 2

This is an old question, but a general one. So let me add this here.

Using the arrow function syntax, you can achieve this in a more concise way, since it is lexically related and can be related.

A function expression with an arrow is a syntactically compact alternative to a regular function expression, although without its own bindings to the keywords this, arguments, super, or new.target.

 const event_handler = (event, arg) => console.log(event, arg); el.addEventListener('click', (event) => event_handler(event, 'An argument')); 

If you need to clear the event listener:

 // Let use use good old function sytax function event_handler(event, arg) { console.log(event, arg); } // Assign the listener callback to a variable var doClick = (event) => event_handler(event, 'An argument'); el.addEventListener('click', doClick); // Do some work... // Then later in the code, clean up el.removeEventListener('click', doClick); 

Here is a crazy line:

 // You can replace console.log with some other callback function el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument')); 

More obedient version : more suitable for any sane work.

 el.addEventListener('click', (event) => ((arg) => { console.log(event, arg); })('An argument')); 

Answer 3

Something you can try is to use the binding method, I think it achieves what you are asking for. If nothing else, it is still very useful.

 function doClick(elem, func) { var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument diffElem.addEventListener('click', func.bind(diffElem, elem)) } function clickEvent(elem, evt) { console.log(this); console.log(elem); // 'this' and elem can be the same thing if the first parameter // of the bind method is the element the event is being attached to from the argument passed to doClick console.log(evt); } var elem = document.getElementById('elem_to_do_stuff_with'); doClick(elem, clickEvent); 

Answer 4

Given the update of the original question, it seems that the problem is related to the context ("this") when passing event handlers. The basics are explained, for example. Here is http://www.w3schools.com/js/js_function_invocation.asp

A simple working version of your example can read

 var doClick = function(event, additionalParameter){ // do stuff with event and this being the triggering event and caller } element.addEventListener('click', function(event) { var additionalParameter = ...; doClick.call(this, event, additionalParameter ); }, false); 

See also Javascript call () and apply () vs bind ()?

Answer 5

Short answer:

 x.addEventListener("click", function(e){myfunction(e, param1, param2)}); ... function myfunction(e, param1, param1) { ... } 

Answer 6

this inside doThings is a window object. Try instead:

 var doThings = function (element) { var eventHandler = function(ev, func){ if (element[ev] == undefined) { return; } element[ev] = function(e){ func(e, element); } }; return { eventHandler: eventHandler }; }; 

Answer 7

 let obj = MyObject(); elem.someEvent( function(){ obj.func(param) } ); //calls the MyObject.func, passing the param.