diff options
Diffstat (limited to 'files/zh-cn/web')
6 files changed, 0 insertions, 811 deletions
diff --git a/files/zh-cn/web/api/detecting_device_orientation/index.html b/files/zh-cn/web/api/detecting_device_orientation/index.html deleted file mode 100644 index d6afcb16f6..0000000000 --- a/files/zh-cn/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: 检测设备方向 -slug: Web/API/Detecting_device_orientation -tags: - - Detecting - - Detecting device orientation - - Device Orientation - - Motion - - 参考 - - 方向 - - 移动设备 - - 设备方向 -translation_of: 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;"><</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;">></span></span> - <span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"><</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;">></span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>div</span><span class="punctuation token" style="color: #999999;">></span></span> -<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>div</span><span class="punctuation token" style="color: #999999;">></span></span> - -<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"><</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;">></span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>pre</span><span class="punctuation token" style="color: #999999;">></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;">></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;"><</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/web/api/document_object_model/events/index.html b/files/zh-cn/web/api/document_object_model/events/index.html deleted file mode 100644 index b2dc638d82..0000000000 --- a/files/zh-cn/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 事件及DOM -slug: Web/API/Document_Object_Model/Events -tags: - - DOM - - events -translation_of: 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"><button onclick="alert('Hello world!')"> -</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> diff --git a/files/zh-cn/web/guide/events/event_handlers/index.html b/files/zh-cn/web/guide/events/event_handlers/index.html deleted file mode 100644 index 279d77159c..0000000000 --- a/files/zh-cn/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: DOM 事件回调 -slug: Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers ---- -<h2 id="概要">概要</h2> - -<p>Web平台提供了多种方式来获取 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">DOM events</a> 的通知。两种常见的风格是：广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的<em><strong>on-event</strong></em>处理器。本页重点介绍后者如何工作的细节。</p> - -<h3 id="注册on-event_处理器">注册<em>on-event</em> 处理器</h3> - -<p><em><strong>on-event </strong></em>处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。<em><strong>on-event </strong></em>事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。</p> - -<p>你可以为一个给定的对象的某个特定事件（比如{{event("click")}}）指定一个 <code>on<...></code> 事件处理器，使用以下几种不同的方式：</p> - -<ul> - <li>在元素上使用 HTML {{Glossary("attribute")}} <code>on<em>{eventtype}</em></code> ，例如：<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>或者通过 JavaScript 设置相应的属性（ {{Glossary("property/JavaScript", "property")}}），例如：<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>注意，每个对象对于给定的事件<strong>只能有一个</strong>事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。</p> - -<p>还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 <code>mybutton.onclick(myevent); )。</code>因为它们更多地用作可以<strong>分配</strong>真实处理器函数的占位符。</p> - -<h3 id="非元素对象">非元素对象</h3> - -<p>事件处理器也可以使用属性设置在生成事件的许多非元素对象上， 包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, 和其他等等，例如：</p> - -<pre><code>xhr.onprogress = function() { ... }</code></pre> - -<h2 id="细节">细节</h2> - -<h3 id="HTML的_on<...>_属性值_和相应JavaScript">HTML的 on<...> 属性值 和相应JavaScript</h3> - -<p>通过 on<...> 元素属性注册的处理程序将通过相应的 on<...> 对象属性可用，相反，则不可用：</p> - -<pre><code><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></code></pre> - -<p>由于历史原因，{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)。</p> - -<h3 id="事件处理器的参数，this_绑定和返回值">事件处理器的参数，<code>this</code> 绑定和返回值</h3> - -<p>当事件处理程序被指定为 <strong>HTML 属性</strong>，指定的代码被包装在有 <strong>以下参数 </strong>的函数中：</p> - -<ul> - <li><code>event</code> - 对于所有的事件处理器，除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> 对于 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件处理器。注意，<code>event</code> 参数实际上包含字符串的错误消息。</li> -</ul> - -<p>当事件处理器被调用，事件处理器内部的 <code>this</code> 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 关键字文档</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler"> </a>.</p> - -<p>事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="什么时候调用事件处理程序">什么时候调用事件处理程序</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="术语">术语 </h3> - -<p>术语 <strong>事件处理器（event handler）</strong> 可用于指：</p> - -<ul> - <li>注册的事件通知的任何函数或对象，</li> - <li>或更具体地说，是通过HTML中的 <code>on... </code>属性或web API中的属性来注册事件监听器的机制，例如 <code><button onclick="alert(this)"> </code>或 <code>window.onload = function() { /* ... */ }</code>。</li> -</ul> - -<p>在讨论各种监听事件的方法时：</p> - -<ul> - <li> <strong>事件侦听器（event listener）</strong>是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,</li> - <li>而<strong>事件处理器（event handler）</strong>是指通过 <code>on...</code> 属性注册的函数。</li> -</ul> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Firefox_9中的事件处理器的变动">Firefox 9中的事件处理器的变动</h3> - -<p>为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。</p> - -<p>具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。</p> - -<h4 id="检测事件处理程序属性的存在">检测事件处理程序属性的存在</h4> - -<p>你可以使用 JavaScript 的 <code><a href="https://developer.mozilla.org/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in">in</a> </code>运算符来检测事件处理器属性（例如，onload）的存在。例如：</p> - -<pre class="brush: js">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="事件处理程序和原型">事件处理程序和原型</h4> - -<p>您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 <code>Window.prototype.onload</code>。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。</p> diff --git a/files/zh-cn/web/guide/events/index.html b/files/zh-cn/web/guide/events/index.html deleted file mode 100644 index e885cdd8b7..0000000000 --- a/files/zh-cn/web/guide/events/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Event developer guide -slug: Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式，也指一些不同种类事件的命名、描述和使用。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概述</a> 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">自定义事件</a> 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件</p> - -<p>接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是，这些事件是随着Web浏览器的发展逐一定义的，所以，目前还没有一个令人满意的系统描述。</p> - -<p><strong>设备</strong>可以在Web浏览器运行时触发事件，例如，由于其在现实世界中的位置和方向的变化，在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> 和 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a> 被讨论，这与设备垂直方向的变化是不同的，但是类似的。</p> - -<p>浏览器显示的 <strong>窗口</strong> 也可以触发事件, 例如，如果用户最大化窗口或以其他方式更改窗口大小。</p> - -<p>网页的<strong>进程加载</strong>可以触发事件，响应下载，解析和呈现网页给用户的不同步骤的完成状态。</p> - -<p>用户与网页内容的<strong>交互</strong>可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生，包括一个复杂的系统，定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括：</p> - -<ul> - <li>原始的 'click' 事件,</li> - <li>鼠标事件,</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events"><font><font>鼠标手势事件</font></font></a><font><font>，和</font></font></li> - <li><font><font>这两个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><font><font>触摸事件</font></font></a><font><font>和早些时候</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)"><font><font>Mozilla的实验性触摸事件</font></font></a><font><font>，现在已废弃。</font></font></li> -</ul> - -<p> </p> - -<p><font><font>该</font></font><strong><font><font>网页的修改</font></font></strong><font><font>结构或内容可能会引发一些事件，如解释的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events"><font><font>突变事件页</font></font></a><font><font>，但使用这些事件也有利于较轻的被弃用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><font><font>突变观察员</font></font></a><font><font>的做法。</font></font></p> - -<p><font><font>嵌入在HTML文档中</font><font>的</font></font><strong><font><font>媒体流</font></font></strong><font><font>可能会触发某些事件，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Media_events"><font><font>媒体事件</font></font></a><font><font>页面中所述。</font></font></p> - -<p>网页发出的<strong>网络请求</strong>可能会触发一些事件。</p> - -<p>还有许多网页浏览器定义的其他事件还不包括在本指南中。</p> - -<div class="note"> -<p>注意: 本是件开发指南还需要大量的工作，结构需要重新组织，页面重写。我们希望你所需要知道的一切事情都会在这里。</p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> 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 deleted file mode 100644 index f817c71bab..0000000000 --- a/files/zh-cn/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Orientation 和 motion 数据解释 -slug: Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained ---- -<p>{{ Draft() }}</p> -<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2> -<p>当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p> -<div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p> -</div> -<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2> -<p>坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p> -<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3> -<p>地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p> -<ul> - <li>X轴沿着地平面，垂直于Y轴，向东为正，向西为负。</li> - <li>Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。</li> - <li>Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。</li> -</ul> -<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3> -<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p> -<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p> -<ul> - <li>x轴沿着屏幕表面，向右为正，向左为负。</li> - <li>y轴沿着屏幕表面，向上为正，向下为负。</li> - <li>z轴垂直屏幕表面或键盘，远离屏幕的方向为正。</li> -</ul> -<div class="note"> - <span style="line-height: 1.5;">注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div> -<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2> -<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。</p> -<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3> -<p>围绕z轴旋转设备将使alpha角度值发生变化:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p> -<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。</span></p> -<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3> -<p>围绕x轴旋转，也就是前后旋转，将使beta值发生改变:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到</span><span style="line-height: 1.5;">180°，向后翻转递减到-180°。</span></p> -<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3> -<p><span style="line-height: 1.5;">当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:</span></p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到</span><span style="line-height: 1.5;">90° ，向左翻转时，递减到-90°。</span></p> 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 deleted file mode 100644 index 87ddd75dde..0000000000 --- a/files/zh-cn/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 ---- -<div class="summary"> -<p>事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。</p> -</div> - -<p> </p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p> </p> - -<p>事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。</p> - -<h2 id="事件设计模式">事件设计模式</h2> - -<p>事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：</p> - -<ul> - <li>事件使用的名称字符串，</li> - <li>用于表示该事件的关键属性的数据结构的类型，以及</li> - <li>将“发出”该事件的JavaScript对象。</li> -</ul> - -<p>该模式的实现</p> - -<ul> - <li>定义一个JavaScript函数，它作为一个参数，被商定的数据结构，以及</li> - <li>使用将发出事件的对象使用名称字符串注册该函数。</li> -</ul> - -<p>该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。</p> - -<p>现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">按钮的事件处理程序演示</h2> - -<p>例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：</p> - -<pre class="brush: js">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 ); -};</pre> - -<p>第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：</p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该<code>buttonDOMElement</code> JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。</p> - -<p>作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：</p> - -<pre class="brush: js">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); - -</pre> - -<p>所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。</p> - -<p>因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。</p> - -<h2 id="值得注意的事件">值得注意的事件</h2> - -<p>Web浏览器定义了大量事件，所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。</p> - -<p>一般来说，我们可以根据事件的对象来区分不同类型的事件，包括：</p> - -<ul> - <li>窗口window对象，如由于调整浏览器大小，</li> - <li>window.screen对象，如由于设备的方向变化，</li> - <li>文档document对象，包括页面的加载、修改、用户交互和卸载，</li> - <li>DOM（文档对象模型）树中的对象，包括用户交互或修改，</li> - <li>XMLHttpRequest对象用于网络的要求，和</li> - <li>当媒体流播放器改变状态时，诸如音频audio和视频video等媒体对象。</li> -</ul> - -<p>虽然这个列表目前不完整。</p> - -<p>一些值得注意的事件是：</p> - -<div class="note"> -<p><strong>Note: </strong>这份清单将需要相关的工作；这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释，如部分讨论在 <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> 或 <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>当页面完成渲染时，全局对象窗口window发出一个名为“load”的事件，这意味着所有资源都已下载并执行，以便运行脚本并显示图像，</li> - <li>当浏览器窗口window的高度或宽度被用户更改时，全局对象窗口发出一个称为“resize”的事件，</li> - <li>DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕，</li> - <li>当鼠标指针位于HTML页面的DOM节点顶部时，当用户按下鼠标按钮时，如div或button的DOM节点对象发出一个名为“click”的事件。</li> -</ul> - -<h2 id="事件对象层次结构">事件对象层次结构</h2> - -<p>Web浏览器定义了许多不同类型的事件。每个定义包括，作为数据结构传递给处理函数，一个对象继承自EventPrototype对象。</p> - -<p>事件对象类层次结构的部分图是：</p> - -<div class="note"> -<p><strong>Note:</strong> 下面的图标是不完整的.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>Web API文档包含定义事件对象的页面，该事件对象还包括事件对象已知的DOM事件子类。</p> - -<h2 id="文档">文档</h2> - -<p>下面是三个链接对MDN（Mozilla开发者网络）网站程序员从事于事件相关的开发是特别有用的：</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> 是 <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>的一部分,</li> - <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>Web API 文档中的 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 对象.</li> -</ul> |