javascript - Javascript将事件传递给函数

Question

为什么第一种方法有效，第二种方法无效？

我很困惑为什么我可以使用第一种方法将事件传递给函数，但不能使用第二种方法。对我来说，这些应该同样有效。松散地基于获取鼠标坐标。

这确实有效：

document.onclick = function (e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x);
};

这不起作用。它返回“未捕获的 ReferenceError：z 未定义”。

document.onclick = mousePosition(z);

function mousePosition (e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x);
};

score 3 · Accepted Answer

因为在第二种方式中，您正在调用函数而不是定义事件操作。试试这个：

function mousePosition (e) {
    var x = e.pageX;
    var y = e.pageY;
    console.log(x);
};
document.onclick = function(z){
    mousePosition(z);
}

或者还有：

function mousePosition (e) {
    var x = e.pageX;
    var y = e.pageY;
    console.log(x);
};
document.onclick = mousePosition;

score 1 · Accepted Answer

第一个是将函数引用传递给 onclick 事件处理程序。第二次您尝试调用 mousePosition(z) 并将结果分配给 onclick 处理程序。这不是你想要的。

score 0 · Accepted Answer

正如提到的其他答案，您的代码：

document.onclick = mousePosition(z);

正在调用mousePosition()函数，传递一个未定义的变量z。你应该做的是传递一个参考mousePosition：

document.onclick = mousePosition;   // note: no parentheses

“我很困惑为什么我可以使用第一种方法将事件传递给函数”

实际上，您并没有将事件传递给函数。您正在声明一个匿名函数，该函数具有一个名为的参数e，并设置document.onclick为引用该函数。

当事件发生时，浏览器调用您的函数，它可能会window.event根据您使用的浏览器传递事件对象：IE 不会将事件对象作为参数传递，而是通过属性使其可用。

浏览器并不关心您是否明确声明了参数，实际上即使您不这样做，您仍然可以访问通过argumentsobject传入的任何参数。

3 回答 3