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