how to pass a parameter to a event's handler

Question

how to pass a parameter to a event's handler?

here's what am trying to do, doesn't work:

for (var i = 0; i < myobj.length; i++) {
myobj[i].onmouseover = myfun(myobj[i]);
}

the following doesn't work neither.

myobj[i].onmouseover = myfun.call(myobj[i]);
myobj[i].onmouseover = function () {myfun(myobj[i]);};
myobj[i].onmouseover = function () {myfun.call(myobj[i]);}; 

Am primarily interested in why it doesn't work, and solution in the same style.

Thanks.

Answer 1

Just use a creator function for your handlers to encapsulate the parameter to pass on.

function createHandler( param ) {
  return function() {
    myfun( param );
  }
}

for (var i = 0; i < myobj.length; i++) {
  myobj[i].onmouseover = createHandler( myobj[i] );
}

The reason your approach doesn't work is, because you don't pass on a function reference, but the result of a function call. So in your first example myfun( myobj[i] ) is evaluated and the result is passed on as the event handler.

I think, what you really mean is, that in case the event is fired, the function shall be evaluated. To do so you either have to pass the parameter via some global var or as a dataset property.

The cleaner solution, however, is to have a generator function as shown above.

Answer 2

Another approach is to use the fact that onmouseover will be invoked as a method (not a function) on the DOM element which fires the event.

In other words, write your code as if you expected someone to do this:

obj = xahlees();
obj.onmouseover();

Here's a solution:

for (var i = 0; i < myobj.length; i++) {
  myobj[i].onmouseover = function() { myFun(this) };
}

I've uploaded a more complete example .