如何向事件处理程序传递参数

Question

如何向事件处理程序传递参数？

以下是我尝试的方法，但并不起作用：

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

我主要关心为什么它不能工作以及解决方案，风格相同。

- Xah Lee

Answer 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])被计算出来，并将结果作为事件处理程序传递。

我认为，你真正想表达的意思是，当事件触发时，应该评估该函数。为此，你必须通过某个全局变量或数据集属性传递参数。

然而，更清晰的解决方案是像上面展示的那样使用生成器函数。

- Sirko

---

PS 跟进问题。我现在做的是否可以，有没有惯用的方式来实现这个？基本上，我有一堆 span.xyz 元素，我希望它们所有都有一个鼠标悬停的功能。（但不使用 JQuery 或任何其他工具） - Xah Lee

只要你不使用任何库，我认为那是最好的方法。@XahLee - Sirko

Answer 2

另一种方法是利用onmouseover会在触发事件的DOM元素上以方法而非函数的形式被调用的事实。换句话说，编写代码时应该像预期有人这样做一样：

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

这里有一个解决方案：

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

我已经上传了一个 更全面的示例 。

- Leonel

---

有点晚了，但这也是一个很好的解决方案。谢谢Leonel。 - Xah Lee