Javascript高级编程学习笔记（68）—

设备事件

随着智能手机与平板电脑的普及，为了更好地让用户与这些设备进行交互

浏览器引入了一种新的方式，而一类新的事件也应运而生，这就是设备事件

W3C从2011年开始制定关于设备事件的草案

下面将会介绍纳入草案的部分设备事件

PS.纳入草案不代表大多数浏览器已经实现

orientationchange事件

苹果公司为 Safari 添加了 orientationchange 事件，以便开发人员能够确定用户何时将设备由横向查看切换为纵向查看

在移动版本的 Safari 浏览器中，window 对象的 orientation 属性可能包含三个值

0 表示正常状态（即home键在下方）
90 向左旋转的横向模式（home键在右方）
-90 向右旋转的横向模式（home键在左方）

只要用户改变了设备的查看模式，就会触发 orientationchange 事件

此时的 event 对象并不包含额外的信息

因为唯一与该事件相关的信息可以通过 window.orientation 访问到

该事件得到所有IOS设备的支持

由于可以将该事件看作 window 事件，所以可以通过指定 body 元素的 orientationchange 特性来指定事件处理程序

MozOrientation事件

Firefox 3.6 为移动设备的方向引入了一个名为 MozOrientation 的新事件（前缀Moz表示这是特定于浏览器开发商的事件不是标准事件）

当设备的加速计检测到设备方向改变时就会触发该事件

但是该事件与 IOS 中的 orientationchange 事件不同

该事件只能提供一个平面的方向变化

该事件在 window 上触发

此时的 event 事件对象包含三个额外属性：

x 向右倾斜减小，反之增大（-1~1，竖直为0）
y 以屏幕面对用户，向远离用户倾斜减小，反之增大（-1~1，不倾斜为0）
z 检测重力加速度（0 失重 1静止）

该事件只有带加速计的设备才支持

deviceorientation事件

本质上，DeviceOrientationEvent 规范定义的 deviceorientation 事件与 MozOrientation 事件类似

也是通过加速计检测到方向变化时在 window 上触发

不过区别在于，该事件用于告诉用户设备在空间中朝向什么方向，而不是如何移动的

设备在三维空间中的定位，依靠 x、y、z 三个轴来定位

当设备静止放在水平表面时三个值都为0

其中 x轴的方向从左到右，y轴方向从下到上，z轴方向从屏幕内向屏幕外

在触发该事件时，事件对象 event 包含的额外信息有以下五种：

alpha：在围绕z轴旋转时（左右旋转）设备方向y轴与初始y轴的夹角，其值为 0~360 的浮点数
beta：在围绕x轴旋转时（前后旋转）设备方向z轴与初始z轴的夹角，其值为 -180~180 的浮点数
gamma：在围绕y轴旋转时（扭转）设备方向z轴与初始z轴的夹角，其值为 -90~90 的浮点数
compassCalibrated：一个布尔值表示设备的指南针是否校准过

通过以上信息可以根据设备的方向，重新排列或者修改屏幕上的元素

该事件得到移动 webkit 浏览器的支持

devicemotion事件

DeviceOrientation Event 规范还定义了一个 devicemotion 事件

该事件用于告知当前设备的移动状态，如设备是否正在移动，在朝那个方向移动等

该事件依旧由加速计检测，当该事件触发时，event对象包含以下属性：

acceleration：一个包含 x、y、z属性的对象，告诉你设备在这三个轴上的加速度（不考虑重力）
accelerationIncludingGravity：一个包含x、y、z属性的对象，告诉你设备在这三个方向上的加速度（考虑重力）
interval：以毫秒表示的时间值，必须在下一次devicemotion事件触发前传入，在每个事件中应该是一个常量
rotationRate：一个包含设备的 alpha beta gamma 属性的对象

在使用时，若读取不到加速器给予的数据（设备没有加速计），以上属性除 inertval 外都为 null

所以在使用这些值之前最好都检测一下，要使用的值是否为 null，这样可以有效提高我们代码的健壮性