如何将参数传递给事件处理程序答案

【问题标题】：how to pass a parameter to a event's handler如何将参数传递给事件处理程序
【发布时间】：2012-04-25 12:16:29
【问题描述】：

如何将参数传递给事件的处理程序？

这是我想要做的，但不起作用：

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

以下内容也不起作用。

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

我主要对为什么它不起作用以及相同风格的解决方案感兴趣。

谢谢。

【问题讨论】：

标签： javascript-events

【解决方案1】：

只需为您的处理程序使用创建者函数来封装要传递的参数。

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

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

您的方法不起作用的原因是，您没有传递函数引用，而是传递函数调用的结果。因此，在您的第一个示例中，myfun( myobj[i] ) 被评估，结果作为事件处理程序传递。

我认为，您真正的意思是，如果事件被触发，则应评估该函数。为此，您必须通过一些全局变量或 dataset property 传递参数。

然而，更简洁的解决方案是使用如上所示的生成器函数。

【讨论】：

PS 跟进问题。我正在做什么，有没有一种惯用的方法来做到这一点？基本上我有一堆 span.xyz 元素，我希望它们都有鼠标悬停行为。（但不使用 JQuery 或任何其他）
@XahLee 我认为，只要你不使用任何库，那就是最好的方法。

【解决方案2】：

另一种方法是使用 onmouseover 将作为触发事件的 DOM 元素上的方法（不是函数）调用的事实。

换句话说，编写您的代码，就好像您希望有人这样做：

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

这里有一个解决方案：

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

我已经上传了more complete example。

【讨论】：

有点晚了，但这也是一个很好的解决方案。谢谢莱昂内尔。