Javascript event handler with parameters

by

I don’t understand exactly what your code is trying to do, but you can make variables available in any event handler using the advantages 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 upon your exact coding situation, you can pretty much always make some sort of closure preserve access to the variables for you.

From your comments, if what you’re trying to accomplish is this:

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

Then, you could do this with a self executing function (IIFE) that captures the arguments you want in a 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 info on how an IIFE works, see these other references:

Javascript wrapping code inside anonymous function

Immediately-Invoked Function Expression (IIFE) In JavaScript – Passing jQuery

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

This last version is perhaps easier to see what it’s doing like this:

// 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]));

It is also possible to use .bind() to add arguments to a callback. Any arguments you pass to .bind() will be prepended to the arguments that the callback itself will have. So, you could 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));

More Related Contents:

  1. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  2. JavaScript: remove event listener
  3. Detecting Browser Autofill
  4. How can I capture the right-click event in JavaScript? [duplicate]
  5. event.preventDefault() vs. return false (no jQuery)
  6. Accessing an object’s property from an event listener call in JavaScript
  7. How to pass event as argument to an inline event handler in JavaScript?
  8. jQuery equivalent of JavaScript’s addEventListener method
  9. Are event handlers in JavaScript called in order?
  10. Handling “onclick” event with pure JavaScript
  11. How to unbind a specific event handler
  12. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  13. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  14. How can I remove a JavaScript event listener?
  15. How to find event listeners on a DOM node in JavaScript or in debugging?
  16. Definitive way to trigger keypress events with jQuery
  17. Removing event listener which was added with bind
  18. Inspect attached event handlers for any DOM element
  19. How can I show a hidden div when a select option is selected?
  20. JavaScript: Listen for attribute change?
  21. Javascript Detect click event outside of div [duplicate]
  22. Javascript – Dynamically assign onclick event in the loop
  23. jQuery event that triggers after CSS is loaded?
  24. How adding event handler inside a class with a class-method as the callback?
  25. Implementing jQuery’s “live” binder with native Javascript
  26. Drop event not firing in chrome
  27. jQuery: How to listen for DOM changes?
  28. Is event a global variable that is accessible everywhere inside the callback chain?
  29. submit event does not fire if submit initiated programmatically
  30. Add multiple window.onload events

Leave a Comment