From de630426a538c1f77d7c59e66827cb75693ed95b Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 21 Apr 2021 00:11:44 +0000 Subject: [CRON] sync translated content --- .../api/detecting_device_orientation/index.html | 319 +++++++++++++++++++++ .../api/document_object_model/events/index.html | 81 ++++++ 2 files changed, 400 insertions(+) create mode 100644 files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html create mode 100644 files/zh-cn/orphaned/web/api/document_object_model/events/index.html (limited to 'files/zh-cn/orphaned/web/api') diff --git a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html b/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..84bf547bc9 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html @@ -0,0 +1,319 @@ +--- +title: 检测设备方向 +slug: orphaned/Web/API/Detecting_device_orientation +tags: + - Detecting + - Detecting device orientation + - Device Orientation + - Motion + - 参考 + - 方向 + - 移动设备 + - 设备方向 +translation_of: Web/API/Detecting_device_orientation +original_slug: Web/API/Detecting_device_orientation +--- +

{{SeeCompatTable}}

+ +

有越来越多的基于web的设备能够确定它们的方向; 也就是说，它们可以报告数据以指示基于重力方向的方向改变。特别地，手持设备如手机可以利用这些信息以自动旋转屏幕，保持内容直立，当设备旋转至横屏时（宽度大于高度），提供网页内容的横屏视图。

+ +

有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}}，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，让交互式地响应用户移动设备旋转和仰角变化成为可能。

+ +

第二种是{{domxref("DeviceMotionEvent")}}，它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同，{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力，包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。

+ +

处理方向（orientation）事件

+ +

要接收设备方向变化信息，只需要监听{{ event("deviceorientation") }}事件：

+ +
+

注意：gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.

+
+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

注册完事件监听处理函数后（对应这个例子中的handleOrientation），监听函数会定期地接收到最新的设备方向数据。

+ +

方向事件对象中包含四个值：

+ +

{{ domxref("DeviceOrientationEvent.absolute") }}

+ +

{{ domxref("DeviceOrientationEvent.alpha") }}

+ +

{{ domxref("DeviceOrientationEvent.beta") }}

+ +

{{ domxref("DeviceOrientationEvent.gamma") }}

+ +

下面是一个事件处理函数的例子：

+ +
function handleOrientation(orientData) {
+  var absolute = orientData.absolute;
+  var alpha = orientData.alpha;
+  var beta = orientData.beta;
+  var gamma = orientData.gamma;
+
+  // Do stuff with the new orientation data
+}
+
+ +

相关值解释

+ +

关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。Orientation and motion data explained 这篇文章有更详细的描述，下面是对这篇文章的总结。

+ + + +

例子

+ +

这个例子会成功运行在支持检测自己方向的设备中的支持{{event("deviceorientation")}} 事件的浏览器中。

+ +

让我们想象一下有一个球在花园中：

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+ +
+ +
+ +

花园只有200px宽（很小对吧），球在中央：

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

现在，如果我们移动设备，球将随之移动：

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +

输出结果:

+ +

在这里以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。

+ +

+ +
+

警告: Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。

+
+ +

处理移动（motion）事件

+ +

移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：{{ event("devicemotion") }}

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +
+ +

真正不同的是做为参数传递给HandleMotion函数的{{ domxref("DeviceMotionEvent") }}对象所包含的信息。

+ +

这个对象包含四个属性：

+ + + +

相关值解释

+ +

{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（Orientation and motion data explained有更详细的说明。）

+ +

acceleration 和 accelerationIncludingGravity，都包含下面三个轴：

+ + + +

对于 rotationRate ，情况有点不同；三个轴的信息对应着以下三种情况：

+ + + +

最后，interval 表示的是从设备获取数据的间隔时间，单位是毫秒。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

浏览器兼容性

+ +

DeviceMotionEvent

+ +

{{Compat("api.DeviceMotionEvent")}}

+ +

DeviceOrientationEvent

+ +

{{Compat("api.DeviceOrientationEvent")}}

+ +

参见

+ + diff --git a/files/zh-cn/orphaned/web/api/document_object_model/events/index.html b/files/zh-cn/orphaned/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..60ab48c450 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/document_object_model/events/index.html @@ -0,0 +1,81 @@ +--- +title: 事件及DOM +slug: orphaned/Web/API/Document_Object_Model/Events +tags: + - DOM + - events +translation_of: Web/API/Document_Object_Model/Events +original_slug: Web/API/Document_Object_Model/Events +--- +

{{DefaultAPISidebar("DOM")}}

+ +

简介

+ +

这一章节介绍了DOM事件模型（DOM Event Model）。主要描述了事件（Event）接口本身以及DOM节点中的事件注册接口、事件监听接口，以及几个展示了多种事件接口之间相互关联的较长示例。

+ +

这里有一张非常不错的图表清晰地解释了在DOM3级事件草案（DOM Level 3 Events draft）中通过DOM处理事件流的三个阶段。

+ +

也可以通过示例章节的 示例5：事件传递 获取更多事件如何在DOM中流转的相关细节。

+ +

注册事件监听器

+ +

这里有3种方法来为一个DOM元素注册事件回调。

+ +

{{domxref("EventTarget.addEventListener")}}

+ +
// 假设 myButton 是一个按钮
+myButton.addEventListener('click', greet, false);
+function greet(event) {
+    // 打印并查看event对象
+    // 打印arguments，以防忽略了其他参数
+    console.log('greet: ' + arguments);
+    alert('Hello world');
+}
+
+ +

你应该在现代Web技术的页面中使用这个方法。

+ +

备注：IE 6-8 不支持这一方法，但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。

+ +

更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.

+ +

HTML 属性

+ +
<button onclick="alert('Hello world!')">
+
+ +

属性中的JS代码触发时通过event参数将Event类型对象传递过去的。其返回值以特殊的方式来处理，已经在HTML规范中被描述。

+ +

应该尽量避免这种书写方式，这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开，这将造成bug很难被找到。

+ +

DOM 元素属性

+ +
// 假设 myButton 是一个按钮
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

带有event参数的函数可以这样被定义。其返回值以特殊的方式来处理，已经在HTML规范中被描述。

+ +

这种方式的问题是每个事件及每个元素只能被设置一个回调。

+ +

访问事件接口

+ +

事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。

+ +

 {{domxref("Event")}} 接口可以在回调函数内被访问到，通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数，同时可以在这个函数中使用。

+ +
function foo(evt) {
+  // evt参数自动分配事件对象
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ +

下级页面导航

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