--- title: DOM 事件回调 slug: orphaned/Web/Guide/Events/Event_handlers translation_of: Web/Guide/Events/Event_handlers original_slug: Web/Guide/Events/Event_handlers ---

概要

Web平台提供了多种方式来获取 DOM events 的通知。两种常见的风格是：广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的on-event处理器。本页重点介绍后者如何工作的细节。

注册on-event 处理器

on-event 处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。on-event 事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。

你可以为一个给定的对象的某个特定事件（比如{{event("click")}}）指定一个 on<...> 事件处理器，使用以下几种不同的方式：

在元素上使用 HTML {{Glossary("attribute")}} on{eventtype} ，例如：
<button onclick="return handleClick(event);">,
或者通过 JavaScript 设置相应的属性（ {{Glossary("property/JavaScript", "property")}}），例如：
document.getElementById("mybutton").onclick = function(event) { ... }.

注意，每个对象对于给定的事件只能有一个事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。

还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 mybutton.onclick(myevent); )。因为它们更多地用作可以分配真实处理器函数的占位符。

非元素对象

事件处理器也可以使用属性设置在生成事件的许多非元素对象上，包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("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>

由于历史原因，{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: onblur, onerror, onfocus, onload, onscroll.)。

事件处理器的参数，`this` 绑定和返回值

当事件处理程序被指定为 HTML 属性，指定的代码被包装在有 以下参数 的函数中：

event - 对于所有的事件处理器，除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.
event, source, lineno, colno, and error 对于 {{domxref("GlobalEventHandlers.onerror", "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）是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,
而事件处理器（event handler）是指通过 on... 属性注册的函数。

规范

Specification	Status	Comment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}	{{Spec2('HTML5 W3C')}}

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}	{{ CompatVersionUnknown() }}

Firefox 9中的事件处理器的变动

为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。

具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。

检测事件处理程序属性的存在

你可以使用 JavaScript 的 in 运算符来检测事件处理器属性（例如，onload）的存在。例如：

if ("onsomenewfeature" in window) {
  /* do something amazing */
}

事件处理程序和原型

您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 Window.prototype.onload。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。

概要