智能手机和平板电脑的普及，为用户与浏览器交互引入了一种新的方式，而一类新事件也应运而生。 设备事件（device event）可以让开发人员确定用户在怎样使用设备。W3C从 2011年开始着手制定一份 关于设备事件的新草案（http://dev.w3.org/geo/api/spec-source-orientation.html），以涵盖不断增长的设备 类型并为它们定义相关的事件。本节会同时讨论这份草案中涉及的 API和特定于浏览器开发商的事件。
       1.orientationchange 事件 
       苹果公司为移动 Safari中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设 备由横向查看模式切换为纵向查看模式。移动 Safari的 window.orientation 属性中可能包含 3个值： 0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模 式（“主屏幕”按钮在左侧）。相关文档中还提到一个值，即 180 表示 iPhone头朝下；但这种模式至今 尚未得到支持。如图展示了 window.orientation 的每个值的含义。

       只要用户改变了设备的查看模式，就会触发 orientationchange 事件。此时的 event 对象不包 含任何有价值的信息，因为唯一相关的信息可以通过 window.orientation 访问到。下面是使用这个 事件的典型示例。 
        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;
              });
       }); 
       在这个例子中，当触发 load 事件时会显示初的方向信息。然后，添加了处理 orientationchange 事件的处理程序。只要发生这个事件，就会有表示新方向的信息更新页面中的消息。 
       所有 iOS设备都支持 orientationchange 事件和 window.orientation 属性。 
       由于可以将 orientationchange 看成 window 事件，所以也可以通过指定 元素的 onorientationchange 特性来指定事件处理程序。 
       2.MozOrientation 事件
        Firefox 3.6为检测设备的方向引入了一个名为 MozOrientation 的新事件。（前缀 Moz 表示这是特 定于浏览器开发商的事件，不是标准事件。）当设备的加速计检测到设备方向改变时，就会触发这个事 件。但这个事件与 iOS中的 orientationchange 事件不同，该事件只能提供一个平面的方向变化。由 于 MozOrientation 事件是在 window 对象上触发的，所以可以使用以下代码来处理。 
       EventUtil.addHandler(window, "MozOrientation", function(event){ //响应事件 }); 
       此时的 event 对象包含三个属性：x、y 和 z。这几个属性的值都介于 1到-1之间，表示不同坐标 轴上的方向。在静止状态下，x 值为 0，y 值为 0，z 值为 1（表示设备处于竖直状态）。如果设备向右倾 斜，x 值会减小；反之，向左倾斜，x 值会增大。类似地，如果设备向远离用户的方向倾斜，y 值会减 小，向接近用户的方向倾斜，y 值会增大。z 轴检测垂直加速度度，1 表示静止不动，在设备移动时值 会减小。（失重状态下值为 0。）以下是输出这三个值的一个简单的例子。 
       EventUtil.addHandler(window, "MozOrientation", function(event){ 
              var output = document.getElementById("output"); 
              output.innerHTML = "X=" + event.x + ", Y=" + event.y + ", Z=" + event.z +"
"; 
       }); 
       只有带加速计的设备才支持 MozOrientation 事件，包括 Macbook、Lenovo Thinkpad、Windows Mobile和 Android设备。请大家注意，这是一个实验性 API，将来可能会变（可能会被其他事件取代）。
       3.deviceorientation 事件 
       本质上，DeviceOrientation Event规范定义的 deviceorientation 事件与 MozOrientation 事件类 似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件 相同的支持限制。不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。
       设备在三维空间中是靠 x、y和 z轴来定位的。当设备静止放在水平表面上时，这三个值都是 0。x 轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往前（如图所示）。 

       触发 deviceorientation 事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。事件对象包含以下 5个属性。 
       alpha：在围绕 z轴旋转时（即左右旋转时），y轴的度数差；是一个介于0到 360之间的浮点数。
       beta：在围绕 x轴旋转时（即前后旋转时）， z轴的度数差；是一个介于180到180之间的浮点数。        
       gamma：在围绕y轴旋转时（即扭转设备时），z轴的度数差；是一个介于90到90之间的浮点数。        
       absolute：布尔值，表示设备是否返回一个绝对值。 
       compassCalibrated：布尔值，表示设备的指南针是否校准过。 如图是 alpha、beta 和 gamma 值含义的示意图。 
       下面是一个输出 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 + "
";
        }); 
       通过这些信息，可以响应设备的方向，重新排列或修改屏幕上的元素。要响应设备方向的改变而旋 转元素，可以参考如下代码。         
       EventUtil.addHandler(window, "deviceorientation", function(event){ 
               var arrow = document.getElementById("arrow");
               arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)"; 

       });

       这个例子只能在移动 WebKit 浏览器中运行，因为它使用了专有的 webkitTransform 属性（即 CSS 标准属性 transform 的临时版）。元素“arrow”会随着 event.alpha 值的变化而旋转，给人一种指南 针的感觉。为了保证旋转平滑，这里的 CSS3变换使用了舍入之后的值。
        到 2011年，支持 deviceorientation 事件的浏览器有 iOS 4.2+中的 Safari、Chrome和 Android版 WebKit。
       4.devicemotion 事件 
       DeviceOrientation Event 规范还定义了一个 devicemotion 事件。这个事件是要告诉开发人员设备 什么时候移动，而不仅仅是设备方向如何改变。例如，通过 devicemotion 能够检测到设备是不是正在 往下掉，或者是不是被走着的人拿在手里。 
       触发 devicemotion 事件时，事件对象包含以下属性。  
       acceleration：一个包含 x、y 和 z 属性的对象，在不考虑重力的情况下，告诉你在每个方向 上的加速度。  
       accelerationIncludingGravity：一个包含 x、y 和 z 属性的对象，在考虑 z 轴自然重力加 速度的情况下，告诉你在每个方向上的加速度。  
       interval：以毫秒表示的时间值，必须在另一个 devicemotion 事件触发前传入。这个值在每 个事件中应该是一个常量。 
      rotationRate：一个包含表示方向的 alpha、beta 和 gamma 属性的对象。 如果读取不到 acceleration、accelerationIncludingGravity 和 rotationRate 值，则它们 的值为 null。因此，在使用这三个属性之前，应该先检测确定它们的值不是 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 实现了 devicemotion 事件。
南昌APP开发公司工程师提供下完整实例代码，代码如下：



       


       

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

  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!