From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../creating_and_triggering_events/index.html | 136 +++++++++++++ .../web/guide/events/event_handlers/index.html | 180 ++++++++++++++++ files/zh-cn/web/guide/events/index.html | 54 +++++ .../zh-cn/web/guide/events/media_events/index.html | 226 +++++++++++++++++++++ .../web/guide/events/mutation_events/index.html | 62 ++++++ .../index.html | 44 ++++ .../overview_of_events_and_handlers/index.html | 135 ++++++++++++ 7 files changed, 837 insertions(+) create mode 100644 files/zh-cn/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/zh-cn/web/guide/events/event_handlers/index.html create mode 100644 files/zh-cn/web/guide/events/index.html create mode 100644 files/zh-cn/web/guide/events/media_events/index.html create mode 100644 files/zh-cn/web/guide/events/mutation_events/index.html create mode 100644 files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html create mode 100644 files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html (limited to 'files/zh-cn/web/guide/events') diff --git a/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..65249da219 --- /dev/null +++ b/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,136 @@ +--- +title: 创建和触发 events +slug: Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - events +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +

本文演示了如何创建和分派DOM事件。这些事件通常称为合成事件，而不是浏览器本身触发的事件。

+ +

创建自定义事件

+ +

Events 可以使用 Event 构造函数创建如下：

+ +
var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

上述代码使用了 EventTarget.dispatchEvent() 方法。

+ +

绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 过时的方式  一节。

+ +

添加自定义数据 – CustomEvent()

+ +

要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。
+ 例如，event 可以创建如下：

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

下面的代码允许你在事件监听器中访问更多的数据：

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

过时的方式

+ +

早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：

+ +
// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+ +

事件冒泡

+ +

通常需要从子元素触发事件，并让祖先捕获它：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+ +

动态创建和派发事件

+ +

元素可以侦听尚未创建的事件：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+ + + +

触发内置事件

+ +

下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。参见这个动态示例

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+
+ +

参见

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

diff --git a/files/zh-cn/web/guide/events/index.html b/files/zh-cn/web/guide/events/index.html new file mode 100644 index 0000000000..e885cdd8b7 --- /dev/null +++ b/files/zh-cn/web/guide/events/index.html @@ -0,0 +1,54 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/Guide/Events +--- +

{{draft()}}

+ +

事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式，也指一些不同种类事件的命名、描述和使用。

+ +

在 概述 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。

+ +

在 自定义事件 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件

+ +

接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是，这些事件是随着Web浏览器的发展逐一定义的，所以，目前还没有一个令人满意的系统描述。

+ +

设备可以在Web浏览器运行时触发事件，例如，由于其在现实世界中的位置和方向的变化，在 page on orientation coordinate systems 和 page on the use of 3D transforms 被讨论，这与设备垂直方向的变化是不同的，但是类似的。

+ +

浏览器显示的 窗口 也可以触发事件, 例如，如果用户最大化窗口或以其他方式更改窗口大小。

+ +

网页的进程加载可以触发事件，响应下载，解析和呈现网页给用户的不同步骤的完成状态。

+ +

用户与网页内容的交互可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生，包括一个复杂的系统，定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括：

+ + + +

 

+ +

该网页的修改结构或内容可能会引发一些事件，如解释的突变事件页，但使用这些事件也有利于较轻的被弃用突变观察员的做法。

+ +

嵌入在HTML文档中的媒体流可能会触发某些事件，如媒体事件页面中所述。

+ +

网页发出的网络请求可能会触发一些事件。

+ +

还有许多网页浏览器定义的其他事件还不包括在本指南中。

+ +
+

注意: 本是件开发指南还需要大量的工作，结构需要重新组织，页面重写。我们希望你所需要知道的一切事情都会在这里。

+
+ +

Docs

+ +

{{LandingPageListSubpages}}

diff --git a/files/zh-cn/web/guide/events/media_events/index.html b/files/zh-cn/web/guide/events/media_events/index.html new file mode 100644 index 0000000000..a436959d90 --- /dev/null +++ b/files/zh-cn/web/guide/events/media_events/index.html @@ -0,0 +1,226 @@ +--- +title: 媒体相关事件 +slug: Web/Guide/Events/Media_events +tags: + - Audio + - Media + - Video +translation_of: Web/Guide/Events/Media_events +--- +

在处理用{{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }}标签嵌入到HTML文档中的媒体时，会触发多种事件。本章列出这些事件，并给出一些使用方法。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
事件名称描述
abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied媒体被清空（初始化）时触发。
ended播放结束时触发。
error在发生错误时触发。元素的error属性会包含更多信息。参阅 HTMLMediaElement.error 获得详细信息。
interruptbegin声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 Using the AudioChannels API
interruptend声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 Using the AudioChannels API
loadedmetadata媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart在媒体开始加载时触发。
mozaudioavailable当音频数据缓存并交给音频层处理时
pause播放暂停时触发。
play在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange在回放速率变化时触发。
seeked在跳跃操作完成时触发。
seeking在跳跃操作开始时触发。
stalled在尝试获取媒体数据，但数据不可用时触发。
suspend在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate元素的currentTime属性表示的时间已经改变。
volumechange在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。
+ +

使用下面的代码，你可以很容易的观察到这些事件:

+ +
var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+
+ +

这个例子获取了文档中第一个video元素，并在video元素上监听了一个seeked事件，该事件会在跳跃操作完成后触发。监听器的处理函数就是简单的调用元素的play()方法，该方法会开始视频的播放。

+ +

接下来来看例子的第三行，这里设置了元素的crruentTime特性值为10.0，这会初始化一个在媒体中跳跃(快进)到10s位置的操作。操作开始时会引起一个seeking事件，随后当跳跃操作完成时会触发seeked事件。

+ +

换句话，本例中只要在媒体中跳跃到10s位置的操作完成，视频就会马上播放。

+ +

兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
load{{ CompatUnknown() }}Removed in {{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
suspend{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
load{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatGeckoMobile("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
suspend{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/guide/events/mutation_events/index.html b/files/zh-cn/web/guide/events/mutation_events/index.html new file mode 100644 index 0000000000..ea2be04985 --- /dev/null +++ b/files/zh-cn/web/guide/events/mutation_events/index.html @@ -0,0 +1,62 @@ +--- +title: Mutation events +slug: Web/Guide/Events/Mutation_events +translation_of: Web/Guide/Events/Mutation_events +--- +

{{deprecated_header()}}

+ +

Mutation 事件 为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。如果可能请用Mutation Observers代替。

+ +

前言

+ +

这个 mutation 事件在DOM Events 标准 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 public-webapps 的"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" ). 

+ +

Mutation Observers 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and Chrome 18中。

+ +

避免用mutation事件的实际原因是性能问题和跨浏览器支持。

+ +

性能

+ +

为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。

+ +

性能好坏 限制了文档拥有mutation事件监听.

+ +

跨浏览器支持

+ +

这些事件在不同的浏览器实现并不一致, 例如:

+ + + +

Dottoro documents browser support for mutation events.

+ +

Mutation 事件列表

+ +

下面是所有 mutation 事件列表, DOM Level 3 Events specification 中定义的:

+ + + +

使用

+ +

你可以如下所示使用element.addEventListener 注册一个mutation 事件监听器:

+ +
element.addEventListener("DOMNodeInserted", function (ev) {
+  // ...
+}, false);
+
+ +

事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 its definition in the specification) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 DOMAttributeNameChanged and DOMElementNameChanged.

diff --git a/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..f817c71bab --- /dev/null +++ b/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,44 @@ +--- +title: Orientation 和 motion 数据解释 +slug: Web/Guide/Events/Orientation_and_motion_data_explained +translation_of: Web/Guide/Events/Orientation_and_motion_data_explained +--- +

{{ Draft() }}

+

总言

+

当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。

+
+

警告: 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.

+
+

坐标系

+

坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。

+

地球坐标系

+

地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。

+ +

设备坐标系

+

设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。

+

,axes.png

+ +
+ 注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用orientationchange事件。
+

旋转(Rotation)

+

旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。

+

Alpha

+

围绕z轴旋转设备将使alpha角度值发生变化:

+

alpha.png

+

alpha为0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。

+

Beta

+

围绕x轴旋转，也就是前后旋转，将使beta值发生改变:

+

beta.png

+

当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到180°，向后翻转递减到-180°。

+

Gamma

+

当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:

+

gamma.png

+

gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到90° ，向左翻转时，递减到-90°。

diff --git a/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html b/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html new file mode 100644 index 0000000000..87ddd75dde --- /dev/null +++ b/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html @@ -0,0 +1,135 @@ +--- +title: Overview of Events and Handlers +slug: Web/Guide/Events/Overview_of_Events_and_Handlers +translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers +--- +
+

事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。

+
+ +

 

+ +

事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。

+ +

事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。

+ +

 

+ +

事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化

+ +
A comparison of the sequential and event-driven browser load sequences.
+ +

到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。

+ +

事件设计模式

+ +

事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：

+ + + +

该模式的实现

+ + + +

该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。

+ +

现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。

+ +

按钮的事件处理程序演示

+ +

例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：

+ +
<button id="buttonOne">Click here to emit a 'click' event</button>
+ +

而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：

+ +
var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};
+ +

第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：

+ +
var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);
+ +

或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。

+ +

{{ EmbedLiveSample('Button_Event_Handler') }}

+ +

这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该buttonDOMElement  JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。

+ +

作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：

+ +
var funcInit = function(){
+    // user code goes here and can safetly address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+
+
+ +

所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。

+ +

因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。

+ +

值得注意的事件

+ +

Web浏览器定义了大量事件，所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。

+ +

一般来说，我们可以根据事件的对象来区分不同类型的事件，包括：

+ + + +

虽然这个列表目前不完整。

+ +

一些值得注意的事件是：

+ +
+

Note: 这份清单将需要相关的工作；这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释，如部分讨论在  this web page 或 this Stack Overflow question.

+
+ + + +

事件对象层次结构

+ +

Web浏览器定义了许多不同类型的事件。每个定义包括，作为数据结构传递给处理函数，一个对象继承自EventPrototype对象。

+ +

事件对象类层次结构的部分图是：

+ +
+

Note: 下面的图标是不完整的.

+
+ +

+ +

Web API文档包含定义事件对象的页面，该事件对象还包括事件对象已知的DOM事件子类。

+ +

文档

+ +

下面是三个链接对MDN（Mozilla开发者网络）网站程序员从事于事件相关的开发是特别有用的：

+ + -- cgit v1.2.3-54-g00ecf