DOM 事件回调 - Web 开发者指南 编辑
概要
Web平台提供了多种方式来获取 DOM events 的通知。两种常见的风格是：广义 addEventListener() 和一组特定的on-event处理器。本页重点介绍后者如何工作的细节。
注册on-event 处理器
on-event 处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。on-event 事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。
你可以为一个给定的对象的某个特定事件（比如click）指定一个 on<...> 事件处理器，使用以下几种不同的方式：
- 在元素上使用 HTML attribute
on{eventtype}，例如：<button onclick="return handleClick(event);">, - 或者通过 JavaScript 设置相应的属性（ property），例如：
document.getElementById("mybutton").onclick = function(event) { ... }.
注意，每个对象对于给定的事件只能有一个事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么addEventListener() 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。
还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 mybutton.onclick(myevent); )。因为它们更多地用作可以分配真实处理器函数的占位符。
非元素对象
事件处理器也可以使用属性设置在生成事件的许多非元素对象上， 包括window, document, XMLHttpRequest, 和其他等等，例如：
xhr.onprogress = function() { ... }细节
HTML的 on<...> 属性值 和相应JavaScript
通过 on<...> 元素属性注册的处理程序将通过相应的 on<...> 对象属性可用，相反，则不可用：
<div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div>
<script>
window.onload = function () {
var div = document.getElementById("a");
console.log("Attribute reflected as a property: ", div.onclick.toString());
// Prints: function onclick(event) { alert('old') }
div.onclick = function() { alert('new') };
console.log("Changed property to: ", div.onclick.toString());
// Prints: function () { alert('new') }
console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
// Prints: alert('old')
}
</script>由于历史原因，<body> 和 <frameset> 元素中的某些元素属性/对象属性实际上是在其父 Window 对象上设置了事件处理器(这些 HTML 命名: onblur, onerror, onfocus, onload, onscroll.)。
事件处理器的参数，this 绑定和返回值
当事件处理程序被指定为 HTML 属性，指定的代码被包装在有 以下参数 的函数中：
event- 对于所有的事件处理器，除了onerror.event,source,lineno,colno, anderror对于onerror事件处理器。注意，event参数实际上包含字符串的错误消息。
当事件处理器被调用，事件处理器内部的 this 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 this 关键字文档 .
事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 "The event handler processing algorithm" in the HTML specification.
什么时候调用事件处理程序
TBD (non-capturing listener)
术语
术语 事件处理器（event handler） 可用于指：
- 注册的事件通知的任何函数或对象，
- 或更具体地说，是通过HTML中的
on...属性或web API中的属性来注册事件监听器的机制，例如<button onclick="alert(this)">或window.onload = function() { /* ... */ }。
在讨论各种监听事件的方法时：
- 事件侦听器（event listener）是指通过
EventTarget.addEventListener()注册的函数或对象, - 而事件处理器（event handler）是指通过
on...属性注册的函数。
规范
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard event handlers | Living Standard | |
| HTML5 event handlers | Recommendation |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Firefox 9中的事件处理器的变动
为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 中更改了基本级别事件处理器的实现方式。
具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。
检测事件处理程序属性的存在
你可以使用 JavaScript 的 in 运算符来检测事件处理器属性（例如，onload）的存在。例如：
if ("onsomenewfeature" in window) {
/* do something amazing */
}
事件处理程序和原型
您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 Window.prototype.onload。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论