javascript基础学习系列二百八十：设备事件

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

1. orientationchange 事件

苹果公司在移动 Safari 浏览器上创造了 orientationchange 事件，以方便开发者判断用户的设备 是处于垂直模式还是水平模式。移动 Safari 在 window 上暴露了 window.orientation 属性，它有以 下 3 种值之一:0 表示垂直模式，90 表示左转水平模式(主屏幕键在右侧)，–90 表示右转水平模式(主 屏幕键在左)。虽然相关文档也提及设备倒置后的值为 180，但设备本身至今还不支持。图 17-9 展示了 window.orientation 属性的各种值。

每当用户旋转设备改变了模式，就会触发 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 属性。
注意 因为orientationchange事件被认为是window事件，所以也可以通过给 元素添加 onorientationchange 属性来指定事件处理程序。

2. deviceorientation 事件

deviceorientation 是 DeviceOrientationEvent 规范定义的事件。如果可以获取设备的加速计信息，
而且数据发生了变化，这个事件就会在 window 上触发。要注意的是，deviceorientation 事件只反 映设备在空间中的朝向，而不涉及移动相关的信息。
设备本身处于 3D 空间即拥有 x 轴、y 轴和 z 轴的坐标系中。如果把设备静止放在水平的表面上，那 么三轴的值均为 0，其中，x 轴方向为从设备左侧到右侧，y 轴方向为从设备底部到上部，z 轴方向为从 设备背面到正面。

当 deviceorientation 触发时，event 对象中会包含各个轴相对于设备静置时坐标值的变化， 主要是以下 5 个属性。
 alpha:0~360 范围内的浮点值，表示围绕 z 轴旋转时 y 轴的度数(左右转)。  beta:–180~180 范围内的浮点值，表示围绕 x 轴旋转时 z 轴的度数(前后转)。  gamma:–90~90 范围内的浮点值，表示围绕 y 轴旋转时 z 轴的度数(扭转)。
 absolute:布尔值，表示设备是否返回绝对值。
 compassCalibrated:布尔值，表示设备的指南针是否正确校准。

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 值的变化而变化，呈现 17 出指南针的样子。这里给 CSS3 旋转变形函数传入了四舍五入后的值，以确保平顺。