javascript基础学习系列九百五十六：设备事件

随着智能手机和平板计算机的出现，用户与浏览器交互的新方式应运而生。为此，一批新事件被发
明了出来。设备事件可以用于确定用户使用设备的方式。W3C 在2011 年就开始起草一份新规范，用于
定义新设备及设备相关的事件。

1. orientationchange 事件
   苹果公司在移动Safari 浏览器上创造了orientationchange 事件，以方便开发者判断用户的设备
   是处于垂直模式还是水平模式。移动Safari 在window 上暴露了window.orientation 属性，它有以
   下3 种值之一：0 表示垂直模式，90 表示左转水平模式（主屏幕键在右侧），–90 表示右转水平模式（主
   屏幕键在左）。虽然相关文档也提及设备倒置后的值为180，但设备本身至今还不支持。
   每当用户旋转设备改变了模式，就会触发orientationchange 事件。但event 对象上没有暴露
   任何有用的信息，这是因为相关信息都可以从window.orientation 属性中获取。以下是这个事件典
   型的用法：
   window.addEventListener(“load”, (event) => {
   let div = document.getElementById(“myDiv”);
   div.innerHTML = "Current orientation is " + window.orientation;
   window.addEventListener(“orientationchange”, (event) => {
   div.innerHTML = "Current orientation is " + window.orientation;
   });
   });
   这个例子会在load 事件触发时显示设备初始的朝向。然后，又指定了orientationchange 事件
   处理程序。此后，只要这个事件触发，页面就会更新以显示新的朝向信息。
   所有iOS 设备都支持orientationchange 事件和window.orientation 属性。
   deviceorientation 事件
   deviceorientation 是DeviceOrientationEvent 规范定义的事件。如果可以获取设备的加速计信息，
   而且数据发生了变化，这个事件就会在window 上触发。要注意的是，deviceorientation 事件只反
   映设备在空间中的朝向，而不涉及移动相关的信息。
   当deviceorientation 触发时，event 对象中会包含各个轴相对于设备静置时坐标值的变化，
   主要是以下5 个属性。
    alpha：0~360 范围内的浮点值，表示围绕z 轴旋转时y 轴的度数（左右转）。
    beta：–180~180 范围内的浮点值，表示围绕x 轴旋转时z 轴的度数（前后转）。
    gamma：–90~90 范围内的浮点值，表示围绕y 轴旋转时z 轴的度数（扭转）。
    absolute：布尔值，表示设备是否返回绝对值。
    compassCalibrated：布尔值，表示设备的指南针是否正确校准。
   下面是一个输出alpha、beta 和gamma 值的简单例子：
   window.addEventListener(“deviceorientation”, (event) => {
   let output = document.getElementById(“output”);
   output.innerHTML =
   Alpha=${event.alpha}, Beta=${event.beta}, Gamma=${event.gamma}<br>;
   });
   基于这些信息，可以随着设备朝向的变化重新组织或修改屏幕上显示的元素。例如，以下代码会随
   着朝向变化旋转一个元素：
   window.addEventListener(“deviceorientation”, (event) => {
   let arrow = document.getElementById(“arrow”);
   arrow.style.webkitTransform = rotate(${Math.round(event.alpha)}deg);
   });
   这个例子只适用于移动WebKit 浏览器，因为使用的是专有的webkitTransform 属性（CSS 标准
   的transform 属性的临时版本）。“箭头”（arrow）元素会随着event.alpha 值的变化而变化，呈现
   出指南针的样子。这里给CSS3 旋转变形函数传入了四舍五入后的值，以确保平顺。