Pass multiple arguments along with an event object to an event handler

Question

How can one pass multiple arguments along with an event object to an event handler without using Function.prototype.bind?

The event handler has a closure in it.

The below basic code won't work,

element.addEventListener("click", eventHandler(eventObj + arguments), false);

function eventHandler(eventObj + arguments) {
  return function(){}; //a closure
}

I don't know how to pass event object and other arguments at the same time to an event handler.

Updated:

I have even tried using anonymous function inside addEventListener. Doing so, it seems that the control never reached to the closure inside the callback function.

element.addEventListener("click", function(e){
    var data = {'event':e, 'args':arguments};
    eventHandler(data);
  }, false);

function eventHandler(data) {
  return function(){  //this function is never executed
    console.log(JSON.stringify(data));
  };
}

Answer 1

So if I understand correctly, you want to add an event listener to the element, and configure some additional data that exists at the time you're adding the listener to be passed to the listener when it's called. If that's what you want to do, you just need a proper closure. Something like this, assuming you want to store the additional data in an object:

var extra_data = {one: "One", two: "Two"};

var make_handler = function (extra_data) {
  return function (event) {
    // event and extra_data will be available here
  };
};

element.addEventListener("click", make_handler(extra_data));

Answer 2

I suspect you can't, but there is a trick:

element.clickArguments=new Object();
element.clickArguments.argument1=...;
element.clickArguments.argument2=...;

Now in your event handler reference the event emitting object.

Answer 3

I know this thread is old, but it's a common mistake I see here.

I have even tried using anonymous function inside addEventListener. Doing so, it seems that the control never reached to the closure inside the callback function.
--
@asur

You need to invoke the returned closure from eventHandler().

element.addEventListener("click", function(e){
    var data = {'event':e, 'args':arguments};
    eventHandler(data)();    // invoking the closure here
  }, false);

If you won't you just get a closure returned to the binary nirvana.

Besides that it's preferred to @jmm's solution while it's much more clean.

Answer 4

helper function:

function curryRight( original ) {
    var args = [].slice.call( arguments, 1 );
    return function() {
        return original.apply( this, [].slice.call( arguments ).concat( args ) );
    };
}

Usage:

element.addEventListener("click", curryRight( eventHandler, 1, 2, 3 ), false );

Example:

function eventHandler( event, a, b, c ) {
    console.log( event, a, b, c );
    //Logs MouseEvent, 1, 2, 3
}

document.addEventListener("click", curryRight( eventHandler, 1, 2, 3 ), false );

Answer 5

I have a function that has a parameter for capturing the current relative URL, as well as other values. For the sake of simplicity, I will only mention the parameter for the URL.

Using "event" as a keyword, as here, captures the event object:

function Analyze(url) {
if (event) {
// do something with the event object, such as:
alert(event.timeStamp);
// ...
}

The function is invoked in a button with

onclick="Analyze(document.URL);".

Yes, I know that this form of invocation makes me a naughty boy, but there was a good excuse for it in this case.

This technique does not work if "event" is replaced with "e" or "x", but there may be other possibilities.