[CRON] sync translated content

2 files changed, 400 insertions, 0 deletions

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
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>有越来越多的基于web的设备能够确定它们的方向; 也就是说，它们可以报告数据以指示基于重力方向的方向改变。特别地，手持设备如手机可以利用这些信息以自动旋转屏幕，保持内容直立，当设备旋转至横屏时（宽度大于高度），提供网页内容的横屏视图。</p>
+
+<p>有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}}，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，让交互式地响应用户移动设备旋转和仰角变化成为可能。</p>
+
+<p>第二种是{{domxref("DeviceMotionEvent")}}，它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同，{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力，包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。</p>
+
+<h2 id="处理方向（orientation）事件">处理方向（<span style="font-size: 2.14285714285714rem;">orientation</span><span style="font-size: 2.14285714285714rem;">）事件</span></h2>
+
+<p>要接收设备方向变化信息，只需要监听{{ event("deviceorientation") }}事件：</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong><a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> 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.</p>
+</div>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>注册完事件监听处理函数后（对应这个例子中的<span style="background-color: rgba(234, 239, 242, 0.247059); font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 1rem; line-height: 19px; white-space: pre;">handleOrientation</span><span style="line-height: 1.5;">），监听函数会定期地接收到最新的设备方向数据。</span></p>
+
+<p>方向事件对象中包含四个值：</p>
+
+<p>{{ domxref("DeviceOrientationEvent.absolute") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.alpha") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.beta") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.gamma") }}</p>
+
+<p>下面是一个事件处理函数的例子：</p>
+
+<pre class="brush: js">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
+}
+</pre>
+
+<h3 id="相关值解释">相关值解释</h3>
+
+<p>关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。<a href="https://developer.mozilla.org/en-US/DOM/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="Orientation and motion data explained">Orientation and motion data explained</a><span style="line-height: 1.5;"> 这篇文章有更详细的描述，下面是对这篇文章的总结。</span></p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }} 表示设备沿z轴上的旋转角度，范围为0~360。</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }} 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }} 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。</li>
+</ul>
+
+<h3 id="例子">例子</h3>
+
+<p>这个例子会成功运行在支持检测自己方向的设备中的支持{{event("deviceorientation")}} 事件的浏览器中。</p>
+
+<p>让我们想象一下有一个球在花园<span style="line-height: 1.5;">中：</span></p>
+
+<pre class="brush: html  language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>garden<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+  <span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>ball<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>div</span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>div</span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+
+<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>pre</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>output<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>pre</span><span class="punctuation token" style="color: #999999;">&gt;</span></span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">花园只有200px宽（很小对吧），球在中央：</span></p>
+
+<pre class="brush: css  language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">.garden </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> relative<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border</span><span class="punctuation token" style="color: #999999;">:</span> 5px solid #CCC<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 10px<span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+
+<span class="selector token" style="color: #669900;">.ball </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> absolute<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">top</span>   <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">left</span>  <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">background</span><span class="punctuation token" style="color: #999999;">:</span> green<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 100%<span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">现在，如果我们移动设备，球将随之移动：</span></p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> ball   <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.ball'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> garden <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.garden'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> output <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.output'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="keyword token" style="color: #0077aa;">var</span> maxX <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientWidth  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientWidth<span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> maxY <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientHeight <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientHeight<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">handleOrientation<span class="punctuation token" style="color: #999999;">(</span></span>event<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>beta<span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // In degree in the range [-180,180]
+</span>  <span class="keyword token" style="color: #0077aa;">var</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>gamma<span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // In degree in the range [-90,90]
+</span>
+  output<span class="punctuation token" style="color: #999999;">.</span>innerHTML  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"beta : "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span>
+  output<span class="punctuation token" style="color: #999999;">.</span>innerHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"gamma: "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // Because we don't want to have the device upside down
+</span> <span class="comment token" style="color: #708090;"> // We constrain the x value to the range [-90,90]
+</span>  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&gt;</span>  <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span>  <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&lt;</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // To make computation easier we shift the range of
+</span> <span class="comment token" style="color: #708090;"> // x and y to [0,180]
+</span>  x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span>
+  y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // 10 is half the size of the ball
+</span> <span class="comment token" style="color: #708090;"> // It center the positioning point to the center of the ball
+</span>  ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>top  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxX<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span>
+  ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>left <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxY<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>y<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+
+window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'deviceorientation'</span><span class="punctuation token" style="color: #999999;">,</span> handleOrientation<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 323px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 342px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 361px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 380px; background: 0px 0px;">
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 399px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 418px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 437px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 456px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 475px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 494px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 513px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 551px; background: 0px 0px;"></div>
+</div>
+
+<p>输出结果:</p>
+
+<p>在<a class="external" href="https://mdn.mozillademos.org/en-US/docs/Web/API/Detecting_device_orientation$samples/Orientation_example?revision=1587910" rel="noopener">这里</a>以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="260" id="frame_Orientation_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Detecting_device_orientation$samples/Orientation_example?revision=1587910" width="230"></iframe></p>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>警告:</strong> Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。</p>
+</div>
+
+<h2 id="处理移动（motion）事件" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">处理移动（motion）事件</h2>
+
+<p><span style="line-height: 1.5;">移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：{{ event("devicemotion") }}</span></p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"devicemotion"</span><span class="punctuation token" style="color: #999999;">,</span> handleMotion<span class="punctuation token" style="color: #999999;">,</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">真正不同的是做为参数传递给</span><em>HandleMotion函数的</em><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象所包含的信息。</span></p>
+
+<p>这个对象包含四个属性：</p>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
+</ul>
+
+<h3 id="相关值解释_2" style="line-height: 24px; font-size: 1.71428571428571rem;">相关值解释</h3>
+
+<p><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（</span><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a><span style="line-height: 1.5;">有更详细的说明。）</span></p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.acceleration" title="The acceleration property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2)."><code>acceleration</code></a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.accelerationIncludingGravity" title="The accelerationIncludingGravity property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2). Unlike DeviceMotionEvent.acceleration which does not compensate for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity."><code>accelerationIncludingGravity</code></a>，都包含下面三个轴：</p>
+
+<ul>
+ <li><code>x</code>: 西向东</li>
+ <li><code>y</code>: 南向北</li>
+ <li><code>z</code>: 垂直地面</li>
+</ul>
+
+<p>对于 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.rotationRate" title="Returns the rate at which the device is rotating around each of its axes in degrees per second.">rotationRate</a></code> ，情况有点不同；三个轴的信息对应着以下三种情况：</p>
+
+<ul>
+ <li><code>alpha</code>: 设备沿着垂直于屏幕（对于桌面设备则是垂直于键盘）的轴的旋转速率</li>
+ <li><code>beta</code>: 设备沿着屏幕（对于桌面设备则是键盘）左至右方向的轴的旋转速率(桌面设备相对于键盘)</li>
+ <li><code>gamma</code>: 设备沿着屏幕（对于桌面设备则是键盘）下至上方向的轴的旋转速率</li>
+</ul>
+
+<p>最后，<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.interval" style="line-height: 1.5;" title="Returns the interval, in milliseconds, at which data is obtained from the underlaying hardware. You can use this to determine the granularity of motion events."><code>interval</code></a><span style="line-height: 1.5;"> 表示的是从设备获取数据的间隔时间，单位是毫秒。</span></p>
+
+<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
+
+<h3 id="DeviceMotionEvent"><code>DeviceMotionEvent</code></h3>
+
+<p>{{Compat("api.DeviceMotionEvent")}}</p>
+
+<h3 id="DeviceOrientationEvent"><code>DeviceOrientationEvent</code></h3>
+
+<p>{{Compat("api.DeviceOrientationEvent")}}</p>
+
+<h2 id="参见" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">参见</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>The legacy <code><a href="https://developer.mozilla.org/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+</ul>
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
+---
+<p>{{DefaultAPISidebar("DOM")}}</p>
+
+<h2 id="Introduction" name="Introduction">简介</h2>
+
+<p>这一章节介绍了DOM事件模型（DOM Event Model）。主要描述了<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">事件（Event）</a>接口本身以及DOM节点中的事件注册接口、<a href="/en-US/docs/Web/API/EventTarget.addEventListener">事件监听接口</a>，以及几个展示了多种事件接口之间相互关联的较长示例。</p>
+
+<p>这里有一张非常不错的图表清晰地解释了在<a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM3级事件草案（DOM Level 3 Events draft）</a>中通过DOM处理事件流的三个阶段。</p>
+
+<p>也可以通过示例章节的 <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">示例5：事件传递</a> 获取更多事件如何在DOM中流转的相关细节。</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">注册事件监听器</h2>
+
+<p>这里有3种方法来为一个DOM元素注册事件回调。</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3>
+
+<pre class="brush: js">// 假设 myButton 是一个按钮
+myButton.addEventListener('click', greet, false);
+function greet(event) {
+    // 打印并查看event对象
+    // 打印arguments，以防忽略了其他参数
+    console.log('greet: ' + arguments);
+    alert('Hello world');
+}
+</pre>
+
+<p>你应该在现代Web技术的页面中使用这个方法。</p>
+
+<p>备注：IE 6-8 不支持这一方法，但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。</p>
+
+<p>更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="/zh-CN/docs/Web/Guide/HTML/Event_attributes">HTML 属性</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>属性中的JS代码触发时通过event参数将Event类型对象传递过去的。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述</a>。</p>
+
+<p>应该尽量避免这种书写方式，这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开，这将造成bug很难被找到。</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 元素属性</h3>
+
+<pre class="brush: js">// 假设 myButton 是一个按钮
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>带有event参数的函数可以这样被定义。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述。</a></p>
+
+<p>这种方式的问题是每个事件及每个元素只能被设置一个回调。</p>
+
+<h2 id="访问事件接口">访问事件接口</h2>
+
+<p>事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。</p>
+
+<p> {{domxref("Event")}} 接口可以在回调函数内被访问到，通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数，同时可以在这个函数中使用。</p>
+
+<pre class="brush: js">function foo(evt) {
+  // evt参数自动分配事件对象
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="下级页面导航">下级页面导航</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM相关参考</a></li>
+ <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Introduction">DOM介绍</a></li>
+ <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Events">事件及DOM</a></li>
+ <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Examples">样例</a></li>
+</ul>