Question

我发现这个代码在chrome，ff和ie中出现问题。但是，我在网络上找不到任何对“magic”event关键字的引用。见this

<html>
<head>
<script type="text/javascript">
function handler(e)
{
alert(e);
}
</script>
</head>
<body>

<h1 onclick="handler(event);alert(0)">Click on this text</h1>

</body>
</html>

如果我将括号中的event更改为其他内容，则此脚本会工作。这是一个弃用的关键字吗？

Answer 1

Event object会自动传递给所有事件处理程序。如果您使用addEventListener添加事件处理程序，则可以选择参数名称（就像您在handler中所做的那样）。但是对于附加了onclick属性的代码，您只能通过隐式变量event访问事件对象。

如果您想了解更多有关事件处理的信息，我建议您在quirksmode.org阅读相关内容。

另请查看MDC - Event handlers：

这些属性对应于HTML'on'事件属性。

与相应的属性不同，这些属性的值是函数（或实现EventListener接口的任何其他对象）而不是字符串。实际上，在HTML中分配事件属性会在指定代码周围创建一个包装函数。例如，给定以下HTML：
<div onclick="foo();">click me!</div>
如果element是对此div的引用，则element.onclick的值有效：
function onclick(event) {
   foo();
}
注意事件对象如何作为参数event传递给此包装函数。

Answer 2

设置事件属性时，将创建隐式函数，并将event作为第一个参数。触发事件时，事件对象将传递给该函数。在HTML 5（仍然是草稿）之前，对这种行为没有一个可靠的定义，但是在主流浏览器中这种方式已经很长时间了，这就是它如何进入规范：

当调用事件处理程序的Function对象时，必须使用一个参数调用其call()回调，并将其设置为相关事件的Event对象。

由于显而易见的原因，该论点恰当地命名为event。 http://www.w3.org/TR/html5/webappapis.html#events

Answer 3

这真的让我失望了。以下＆＃39;拼写错误＆＃39;适用于Chromium，但不适用于FF：

some_worker.onmessage = function(e) {

    // do stuff

    if (e.data instanceof ArrayBuffer)
        intArray = new Uint8Array(event.data);

    // do other stuff
};

Chromium正在观察＆＃39;事件＆＃39;但是FF抛出了一个未定义的变量＆＃39;错误！刚刚改变了事件＆＃39;到了＆＃39;一切都很好。

我注意到即使是stackoverflow的代码标记也会观察到事件＆＃39;作为一个隐含的关键词......不要敲FF，因为它检测到了拼写错误。

Answer 4

我猜您正在尝试将点击的HTML元素传递给handler()函数。我的代码的正确方法是： <h1 onclick="handler(this);">Click on this text</h1>

但我强烈建议避免这种做法。避免在HTML上定义样式和行为。请阅读以下文章： Unobtrusive JavaScript

js中的事件关键字

4 个答案: