Question

我正在查看下面的这个基本示例（这使得DOM中的所有图像在鼠标悬停时都是半透明的），并且对于任意函数（例如handleMouseOver）如何接收事件对象感到困惑给它一个论点。

如何将这样的函数分配给onmouseover属性，告诉它以这种方式修改这个函数，因为函数定义本身没有固有的东西说：“请给我一个事件“？赋值运算符是否以某种方式超载？或者浏览器在这里做了一些额外的工作？我真的很感激这个现象的详细解释的链接，因为它似乎没有任何意义将它看作纯JavaScript（至少对我来说！）

function handleMouseOver(e) {
    e.target.style.opacity = 0.5;
}

function handleMouseOut(e) {
    e.target.style.opacity = 1;
}

var elements = document.getElementsByTagName("img");

for (var i = 0; i < elements.length; i++) {
    elements[i].onmouseover = handleMouseOver;
    elements[i].onmouseout = handleMouseOut;
}

Answer 1

例如，

onmouseover是一个事件处理程序。当需要调用事件处理程序时（在这种情况下，当浏览器javascript引擎决定它时），它将调用它传递一些预先确定的参数（所有好的文档将解释这些参数是什么）。但是，您对这些参数的使用是可选的。

这可以通过手动函数调用来证明：

function myFunction(e){
   alert(e.myProperty);
}

//assign the handler
var handler = myFunction;

//when required, create event parameter data and call the function assigned to the handler
var myE = { myProperty: "some data" };
handler(myE);

它不是“完全”它是如何工作的（因为我不知道浏览器如何选择实现它们的代码），但它显示了这个概念。

Here is an example in action

Answer 2

不仅传递了事件对象，而且函数中的this值也设置为事件目标。这是由浏览器完成的，由DOM规范决定。

编辑：

我希望在DOM规范中找到更详细的内容（我确信之前已经看过），但到目前为止我发现了这个：

在JavaScript中，用户定义的函数被认为是实现EventListener接口。因此，Event对象将在调用时作为用户定义函数的第一个参数提供。此外，JavaScript对象在定义handleEvent方法时也可以实现EventListener接口。

https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#glossary-event-handler

顺便说一下，最后一句话是在OO上下文中讨论绑定事件监听器的an interesting way。

Answer 3

让我们通过一个浏览器的例子来分解它。例如IE'S OnMouseOver Event。

在备注部分，它表示即使对于不要求的事件，例如IHTMLEventObj，它也会为所有事件传递Body.OnLoad。

当我们进入IHTMLEventObj的详细信息时，我们会阅读以下备注

虽然所有事件属性都可用于所有事件对象，但某些属性在某些事件中可能没有有意义的值

因此，无论如何都会传递Event对象;您必须在某些特定事件中访问该对象，并获取特定于事件的属性以获取与事件相关的数据。

Answer 4

您可以将任何您喜欢的参数传递给任何JavaScript函数。

在函数定义中定义它们只意味着你有一个命名的局部变量来使用它来访问它们。

也就是说：

function foo() {

}

foo("hello");

...不会抛出错误。

当一个函数被视为一个事件处理程序时（如果你将一个函数分配给一个DOM节点的onmouseover属性，浏览器会提供什么代码）那么事件对象将被传递为参数。

onmouseover属性如何知道接受事件对象？

4 个答案: