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

Here's what am trying to do, but it 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.

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

Here's what am trying to do, but it 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.

• javascript
• dom-events

Share Improve this question Follow edited Jan 26, 2023 at 20:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 25, 2012 at 12:16 Xah LeeXah Lee 17.6k99 gold badges3939 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

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 plete example .