我发现这段代码可以在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
更改为其他内容,此脚本将停止工作。这是一个过时的关键字吗?
5条答案
按热度按时间5jdjgkvh1#
Event
object会自动传递给所有事件行程常式。如果您使用addEventListener
新增事件行程常式,您可以选择参数名称(就像您在handler
中所做的一样)。但是对于附加onclick
属性的程式码,您只能透过隐含变数event
存取事件对象。如果您想了解更多关于事件处理的一般信息,我建议您阅读quirksmode.org。
还可以查看MDC -事件处理程序:
这些是Map于HTML 'on'事件属性的属性。
与相应的属性不同,这些属性的值是函数(或实现EventListener接口的任何其他对象)而不是字符串。事实上,在HTML中分配事件属性会在指定的代码周围创建 Package 函数。例如,给定以下HTML:
如果
element
是对此div
的引用,则element.onclick
的值有效地为:请注意事件对象是如何作为参数
event
传递给此 Package 函数的。8qgya5xd2#
当一个事件属性被设置时,一个隐式函数被创建,第一个参数为
event
。当事件触发时,事件对象被传递给该函数。直到HTML 5(仍然是一个草案)才有一个关于这个行为的明确定义,但在主要的浏览器中已经有很长一段时间了,这就是它成为规范的原因:调用事件处理程序的Function对象时,必须使用一个参数调用其
call()
回调,该参数设置为所涉及事件的Event
对象。这个论点被恰当地命名为
event
,原因显而易见。http://www.w3.org/TR/html5/webappapis.html#eventspbpqsu0x3#
这真的让我很困惑。下面的“错字”在Chromium中有效,但在FF中无效:
Chromium正在观察'event'的隐式关键字,但FF抛出了一个'undefined variable'错误!只需将'event'更改为'e',一切都很好。
我注意到,即使是stackoverflow的代码标记也将“event”视为一个隐式关键字......不要敲FF,因为它检测到了错字。
xwmevbvl4#
event
不仅是JavaScript中的“其他保留字”,而且在所有JavaScript事件(Event
)中始终是保留字。请参阅此处:https://developer.mozilla.org/en-US/docs/Web/API/Event对于具有
function
(如onclick="myFunction()"
)的事件,有两种解决方案。第一个:
onclick="myFunction(event)"
将event
传递给function
。这与this
类似。您可以使用
onclick="consloe.log(event)"
和onclick="consloe.log(this)"
进行测试。event
在这里是一个保留字,与this
相同。this
包含(HTML)元素。event
包含Event。认为
onclick="myFunction(evt)"
不起作用(错误:evt
未定义)。在下面的例子中,
event
不仅被传递到myFunction()
,而且可以作为函数内部的一个变量使用。在像这样简单的事情中,这是不必要的,因为event
在function
内部总是全局的。JSF中间文件:https://jsfiddle.net/usfrc6dn/
第二个:在
onclick="myFunction()"
中传递的内容不可见。event
在function
内部使用。JSF中间文件:https://jsfiddle.net/qczt587u/
只有第二种方法在参考文献中有效,因为关于
event
作为onclick="myFunction(event)"
的使用没有找到,分别只用于onclick="myFunction(this)"
。当您有其他信息时,请进行更正。当使用
onclick="myFunction(event)"
时,可以将函数中的event
用作变量,如function myFunction(evt) { evt.preventDefault();}
。示例:
第一章:
this
和event
之间也有需要考虑的差异。hl0ma9xz5#
我猜你是想把点击的HTML元素传递给你的
handler()
函数。在你的代码中正确的方法是:<h1 onclick="handler(this);">Click on this text</h1>
但是我强烈建议避免使用这种方法。避免在HTML上定义样式和行为。请阅读下面的文章:Unobtrusive JavaScript