智能手機(jī)和平板電腦的普及，為用戶與瀏覽器交互引入了一種新的方式，而一類新事件也應(yīng)運(yùn)而生。 設(shè)備事件（device event）可以讓開發(fā)人員確定用戶在怎樣使用設(shè)備。W3C從 2011年開始著手制定一份 關(guān)于設(shè)備事件的新草案（http://dev.w3.org/geo/api/spec-source-orientation.html），以涵蓋不斷增長(zhǎng)的設(shè)備 類型并為它們定義相關(guān)的事件。本節(jié)會(huì)同時(shí)討論這份草案中涉及的 API和特定于瀏覽器開發(fā)商的事件。
? ? ? ?1.orientationchange 事件?
? ? ? ?蘋果公司為移動(dòng) Safari中添加了 orientationchange 事件，以便開發(fā)人員能夠確定用戶何時(shí)將設(shè) 備由橫向查看模式切換為縱向查看模式。移動(dòng) Safari的 window.orientation 屬性中可能包含 3個(gè)值： 0 表示肖像模式，90 表示向左旋轉(zhuǎn)的橫向模式（“主屏幕”按鈕在右側(cè)），-90 表示向右旋轉(zhuǎn)的橫向模 式（“主屏幕”按鈕在左側(cè)）。相關(guān)文檔中還提到一個(gè)值，即 180 表示 iPhone頭朝下；但這種模式至今 尚未得到支持。如圖展示了 window.orientation 的每個(gè)值的含義。

? ? ? ?只要用戶改變了設(shè)備的查看模式，就會(huì)觸發(fā) orientationchange 事件。此時(shí)的 event 對(duì)象不包 含任何有價(jià)值的信息，因?yàn)槲ㄒ幌嚓P(guān)的信息可以通過(guò) window.orientation 訪問(wèn)到。下面是使用這個(gè) 事件的典型示例。?
? ? ? ? var div = document.getElementById("myDiv");
? ? ? ?div.innerHTML = "Current orientation is " + window.orientation;?
? ? ? ?EventUtil.addHandler(window, "orientationchange", function(event){
? ? ? ? ? ? ? div.innerHTML = "Current orientation is " + window.orientation;
? ? ? ? ? ? ? });
? ? ? ?});?
? ? ? ?在這個(gè)例子中，當(dāng)觸發(fā) load 事件時(shí)會(huì)顯示初的方向信息。然后，添加了處理 orientationchange 事件的處理程序。只要發(fā)生這個(gè)事件，就會(huì)有表示新方向的信息更新頁(yè)面中的消息。?
? ? ? ?所有 iOS設(shè)備都支持 orientationchange 事件和 window.orientation 屬性。?
? ? ? ?由于可以將 orientationchange 看成 window 事件，所以也可以通過(guò)指定 元素的 onorientationchange 特性來(lái)指定事件處理程序。?
? ? ? ?2.MozOrientation 事件
? ? ? ? Firefox 3.6為檢測(cè)設(shè)備的方向引入了一個(gè)名為 MozOrientation 的新事件。（前綴 Moz 表示這是特 定于瀏覽器開發(fā)商的事件，不是標(biāo)準(zhǔn)事件。）當(dāng)設(shè)備的加速計(jì)檢測(cè)到設(shè)備方向改變時(shí)，就會(huì)觸發(fā)這個(gè)事 件。但這個(gè)事件與 iOS中的 orientationchange 事件不同，該事件只能提供一個(gè)平面的方向變化。由 于 MozOrientation 事件是在 window 對(duì)象上觸發(fā)的，所以可以使用以下代碼來(lái)處理。?
? ? ? ?EventUtil.addHandler(window, "MozOrientation", function(event){ //響應(yīng)事件 });?
? ? ? ?此時(shí)的 event 對(duì)象包含三個(gè)屬性：x、y 和 z。這幾個(gè)屬性的值都介于 1到-1之間，表示不同坐標(biāo) 軸上的方向。在靜止?fàn)顟B(tài)下，x 值為 0，y 值為 0，z 值為 1（表示設(shè)備處于豎直狀態(tài)）。如果設(shè)備向右傾 斜，x 值會(huì)減?。环粗?，向左傾斜，x 值會(huì)增大。類似地，如果設(shè)備向遠(yuǎn)離用戶的方向傾斜，y 值會(huì)減 小，向接近用戶的方向傾斜，y 值會(huì)增大。z 軸檢測(cè)垂直加速度度，1 表示靜止不動(dòng)，在設(shè)備移動(dòng)時(shí)值 會(huì)減小。（失重狀態(tài)下值為 0。）以下是輸出這三個(gè)值的一個(gè)簡(jiǎn)單的例子。?
? ? ? ?EventUtil.addHandler(window, "MozOrientation", function(event){?
? ? ? ? ? ? ? var output = document.getElementById("output");?
? ? ? ? ? ? ? output.innerHTML = "X=" + event.x + ", Y=" + event.y + ", Z=" + event.z +"
";?
? ? ? ?});?
? ? ? ?只有帶加速計(jì)的設(shè)備才支持 MozOrientation 事件，包括 Macbook、Lenovo Thinkpad、Windows Mobile和 Android設(shè)備。請(qǐng)大家注意，這是一個(gè)實(shí)驗(yàn)性 API，將來(lái)可能會(huì)變（可能會(huì)被其他事件取代）。
? ? ? ?3.deviceorientation 事件?
? ? ? ?本質(zhì)上，DeviceOrientation Event規(guī)范定義的 deviceorientation 事件與 MozOrientation 事件類 似。它也是在加速計(jì)檢測(cè)到設(shè)備方向變化時(shí)在 window 對(duì)象上觸發(fā)，而且具有與 MozOrientation 事件 相同的支持限制。不過(guò)，deviceorientation 事件的意圖是告訴開發(fā)人員設(shè)備在空間中朝向哪兒，而不是如何移動(dòng)。
? ? ? ?設(shè)備在三維空間中是靠 x、y和 z軸來(lái)定位的。當(dāng)設(shè)備靜止放在水平表面上時(shí)，這三個(gè)值都是 0。x 軸方向是從左往右，y軸方向是從下往上，z軸方向是從后往前（如圖所示）。?

? ? ? ?觸發(fā) deviceorientation 事件時(shí)，事件對(duì)象中包含著每個(gè)軸相對(duì)于設(shè)備靜止?fàn)顟B(tài)下發(fā)生變化的信息。事件對(duì)象包含以下 5個(gè)屬性。?
? ? ? ?alpha：在圍繞 z軸旋轉(zhuǎn)時(shí)（即左右旋轉(zhuǎn)時(shí)），y軸的度數(shù)差；是一個(gè)介于0到 360之間的浮點(diǎn)數(shù)。
? ? ? ?beta：在圍繞 x軸旋轉(zhuǎn)時(shí)（即前后旋轉(zhuǎn)時(shí)）， z軸的度數(shù)差；是一個(gè)介于?180到180之間的浮點(diǎn)數(shù)。 ? ? ? ?
? ? ? ?gamma：在圍繞y軸旋轉(zhuǎn)時(shí)（即扭轉(zhuǎn)設(shè)備時(shí)），z軸的度數(shù)差；是一個(gè)介于?90到90之間的浮點(diǎn)數(shù)。 ? ? ? ?
? ? ? ?absolute：布爾值，表示設(shè)備是否返回一個(gè)絕對(duì)值。?
? ? ? ?compassCalibrated：布爾值，表示設(shè)備的指南針是否校準(zhǔn)過(guò)。 如圖是 alpha、beta 和 gamma 值含義的示意圖。?
? ? ? ?下面是一個(gè)輸出 alpha、beta 和 gamma 值的例子。?
? ? ? ?EventUtil.addHandler(window, "deviceorientation", function(event){?
? ? ? ?var output = document.getElementById("output");?
? ? ? ?output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta + ", Gamma=" + event.gamma + "
";
? ? ? ? });?
? ? ? ?通過(guò)這些信息，可以響應(yīng)設(shè)備的方向，重新排列或修改屏幕上的元素。要響應(yīng)設(shè)備方向的改變而旋 轉(zhuǎn)元素，可以參考如下代碼。 ? ? ? ??
? ? ? ?EventUtil.addHandler(window, "deviceorientation", function(event){?
? ? ? ? ? ? ? ?var arrow = document.getElementById("arrow");
? ? ? ? ? ? ? ?arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";?

? ? ? ?});

? ? ? ?這個(gè)例子只能在移動(dòng) WebKit 瀏覽器中運(yùn)行，因?yàn)樗褂昧藢Ｓ械?webkitTransform 屬性（即 CSS 標(biāo)準(zhǔn)屬性 transform 的臨時(shí)版）。元素“arrow”會(huì)隨著 event.alpha 值的變化而旋轉(zhuǎn)，給人一種指南 針的感覺。為了保證旋轉(zhuǎn)平滑，這里的 CSS3變換使用了舍入之后的值。
? ? ? ? 到 2011年，支持 deviceorientation 事件的瀏覽器有 iOS 4.2+中的 Safari、Chrome和 Android版 WebKit。
? ? ? ?4.devicemotion 事件?
? ? ? ?DeviceOrientation Event 規(guī)范還定義了一個(gè) devicemotion 事件。這個(gè)事件是要告訴開發(fā)人員設(shè)備 什么時(shí)候移動(dòng)，而不僅僅是設(shè)備方向如何改變。例如，通過(guò) devicemotion 能夠檢測(cè)到設(shè)備是不是正在 往下掉，或者是不是被走著的人拿在手里。?
? ? ? ?觸發(fā) devicemotion 事件時(shí)，事件對(duì)象包含以下屬性。 ??
? ? ? ?acceleration：一個(gè)包含 x、y 和 z 屬性的對(duì)象，在不考慮重力的情況下，告訴你在每個(gè)方向 上的加速度。 ??
? ? ? ?accelerationIncludingGravity：一個(gè)包含 x、y 和 z 屬性的對(duì)象，在考慮 z 軸自然重力加 速度的情況下，告訴你在每個(gè)方向上的加速度。 ??
? ? ? ?interval：以毫秒表示的時(shí)間值，必須在另一個(gè) devicemotion 事件觸發(fā)前傳入。這個(gè)值在每 個(gè)事件中應(yīng)該是一個(gè)常量。?
? ? ? rotationRate：一個(gè)包含表示方向的 alpha、beta 和 gamma 屬性的對(duì)象。 如果讀取不到 acceleration、accelerationIncludingGravity 和 rotationRate 值，則它們 的值為 null。因此，在使用這三個(gè)屬性之前，應(yīng)該先檢測(cè)確定它們的值不是 null。例如：?
? ? ? ?EventUtil.addHandler(window, "devicemotion", function(event){?
? ? ? ? ? ? ? var output = document.getElementById("output");
? ? ? ? ? ? ? ?if (event.rotationRate !== null){?
? ? ? ? ? ? ? ? ? ? ?output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" + event.rotationRate.beta + ", Gamma=" + event.rotationRate.gamma;?
? ? ? ? ? ? ? }
? ? ? ? });?
與 deviceorientation 事件類似，只有 iOS 4.2+中的 Safari、Chrome和 Android版 WebKit 實(shí)現(xiàn)了 devicemotion 事件。
南昌APP開發(fā)公司工程師提供下完整實(shí)例代碼，代碼如下：



? ? ? ?


? ? ? ?

This example only works in Chrome in devices such as Macbooks, Thinkpads, or Android, or on Safari for iOS 4.2+.

? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.gimmickmag.com/如轉(zhuǎn)載請(qǐng)注明出處!