From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/guide/events/event_handlers/index.html | 180 +++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/zh-cn/web/guide/events/event_handlers/index.html (limited to 'files/zh-cn/web/guide/events/event_handlers') diff --git a/files/zh-cn/web/guide/events/event_handlers/index.html b/files/zh-cn/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..279d77159c --- /dev/null +++ b/files/zh-cn/web/guide/events/event_handlers/index.html @@ -0,0 +1,180 @@ +--- +title: DOM 事件回调 +slug: Web/Guide/Events/Event_handlers +translation_of: 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<...> 事件处理器，使用以下几种不同的方式：

+ + + +

注意，每个对象对于给定的事件只能有一个事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{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 属性，指定的代码被包装在有 以下参数 的函数中：

+ + + +

当事件处理器被调用，事件处理器内部的 this 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 this 关键字文档 .

+ +

事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 "The event handler processing algorithm" in the HTML specification.

+ +

什么时候调用事件处理程序

+ +

TBD (non-capturing listener)

+ +

术语 

+ +

术语 事件处理器（event handler） 可用于指：

+ + + +

在讨论各种监听事件的方法时：

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{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')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari 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属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。

-- cgit v1.2.3-54-g00ecf