这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

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 命名: onbluronerroronfocusonloadonscroll.)。

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

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

  • event - 对于所有的事件处理器,除了 onerror.
  • eventsourcelinenocolno, and error 对于 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  

浏览器兼容性

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属性,所以可以这样做,而现在你不能这样做,这提高了兼容性。

文档标签和贡献者

 此页面的贡献者: tcatche, Le-Fu, xgqfrms-GitHub, ziyunfei, Darrel.Hsu
 最后编辑者: tcatche,