orientationchange 事件Safari
苹果公司为移动 Safari 中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设 备由横向查看模式切换为纵向查看模式。移动 Safari 的 window.orientation 属性中可能包含 3 个值: 19 0 表示肖像模式，90 表示向左旋转的横向模式(“主屏幕”按钮在右侧)，-90 表示向右旋转的横向模 式(“主屏幕”按钮在左侧)。相关文档中还提到一个值，即 180 表示 iPhone 头朝下;但这种模式至今 尚未得到支持。
MozOrientation 事件Firefox
这个事件与 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。)
deviceorientation 事件 (Safari、Chrome 和 Android 版 WebKit)
deviceorientation 事件与 MozOrientation 事件类 似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件 相同的支持限制。不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而 不是如何移动。
设备在三维空间中是靠 x、y 和 z 轴来定位的。当设备静止放在水平表面上时，这三个值都是 0。x
轴方向是从左往右，y 轴方向是从下往上，z 轴方向是从后往前
下面是一个输出 alpha、beta 和 gamma 值的例子。
EventUtil.addHandler(window, "deviceorientation", function(event){ 9 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)";
12 13
});
这个例子只能在移动 WebKit 浏览器中运行，因为它使用了专有的 webkitTransform 属性(即 CSS 标准属性 transform 的临时版)。元素“arrow”会随着 event.alpha 值的变化而旋转，给人一种指南 针的感觉。为了保证旋转平滑，这里的 CSS3 变换使用了舍入之后的值。
devicemotion 事件(Safari、Chrome 和 Android 版 WebKit )
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){ 2 var output = document.getElementById("output");
if (event.rotationRate !== null){
} });
output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" +
event.rotationRate.beta + ", Gamma=" +
event.rotationRate.gamma;
} });
触摸与手势事件
触摸事件
touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用 preventDefault()可以阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
上面这几个事件都会冒泡，也都可以取消。每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性: bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 11 ctrlKey 和 metaKey。
除了常见的 DOM 属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的 Touch 对象的数组
targetTouchs:特定于事件目标的 Touch 对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的 Touch 对象的数组。
每个 Touch 对象包含下列属性。
clientX:触摸目标在视口中的 x 坐标。
clientY:触摸目标在视口中的 y 坐标。
identifier:标识触摸的唯一 ID。
pageX:触摸目标在页面中的 x 坐标。
pageY:触摸目标在页面中的 y 坐标。
screenX:触摸目标在屏幕中的 x 坐标。
screenY:触摸目标在屏幕中的 y 坐标。
target:触摸的 DOM 节点目标。
function handleTouchEvent(event){
//只跟踪一次触摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "
Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止滚动 output.innerHTML += "
Touch moved (" +event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break; }
} }
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
EventUtil.addHandler(document, "touchstart", handleTouchEvent); EventUtil.addHandler(document, "touchend", handleTouchEvent); EventUtil.addHandler(document, "touchmove", handleTouchEvent);
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输 出信息。当 touchstart 事件发生时，会将触摸的位置信息输出到
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素 时，这些事件(包括鼠标事件)发生的顺序如下:
(1) touchstart
(2) mouseover
(3) mousemove(一次)
(4) mousedown
(5) mouseup
(6) click
(7) touchend
手势事件
当两个手指触摸屏幕时就会产生手势，手势通常会改变 显示项的大小，或者旋转显示项。有三个手势事件，分别介绍如下。
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend:当任何一个手指从屏幕上面移开时触发。
只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意 味着两个手指必须同时位于该元素的范围之内，才能触发手势事件(这个元素就是目标)。由于这些事 件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都 位于其范围内的那个元素。
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发 touchstart 事件。如 果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件，随后触发基于该手指的 touchstart 事件。如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件。但只要有一个手指移开， 就会触发 gestureend 事件，紧接着又会触发基于该手指的 touchend 事件。
与触摸事件一样，每个手势事件的 event 对象都包含着标准的鼠标事件属性:bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。此外，还包含两个额外的属性:rotation 和 scale。其中，rotation 属性表 示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转(该值从 0 开始)。而 scale 属性表示两个手指间距离的变化情况(例如向内收缩会缩短距离);这个值从 1 开始，并随距离拉大而 增长，随距离缩短而减小。
function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "
Gesture ended (rotation=" + event.rotation +",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "
Gesture changed (rotation=" + event.rotation +",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false); document.addEventListener("gestureend", handleGestureEvent, false); document.addEventListener("gesturechange", handleGestureEvent, false);
注：触摸事件也会返回 rotation 和 scale 属性，但这两个属性只会在两个手指与 屏幕保持接触时才会发生变化。一般来说，使用基于两个手指的手势事件，要比管理 触摸事件中的所有交互要容易得多。