3

我正在查看下面的这个基本示例（它使 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;
}
4

4 回答 4

1

不仅传递了事件对象，而且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 上下文中绑定事件侦听器的有趣方式。

于 2013-09-23T14:36:03.723 回答
1

让我们以一个浏览器为例来分解它。例如IE 的 OnMouseOver 事件。

在备注部分它说它为所有事件传递IHTMLEventObj ，即使是不需要它的事件，例如Body.OnLoad。

当我们进入IHTMLEventObj的细节时，我们阅读了以下注释

尽管所有事件属性都可用于所有事件对象，但某些属性在某些事件期间可能没有有意义的值

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

于 2013-09-23T14:41:48.797 回答
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);

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

这是一个实际的例子

于 2013-09-23T14:29:58.817 回答
0

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

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

也就是说：

function foo() {

}

foo("hello");

...不会抛出错误。

当函数被视为事件处理程序时（如果您将函数分配给onmouseoverDOM 节点的属性，浏览器提供的代码将执行此操作），则事件对象将作为参数传递。

于 2013-09-23T14:32:54.743 回答