摘要：對(duì)象不包含任何信息事件事件，該事件已被移除，應(yīng)該使用事件但是事件仍然是實(shí)驗(yàn)性的事件，目前有部分瀏覽器暫時(shí)不支持。每個(gè)觸摸事件的對(duì)象都提供了在鼠標(biāo)事件中常見的屬性。

該事件的window.orientation屬性中包含3個(gè)值：0表示肖像模式、90表示左旋轉(zhuǎn)的橫向模式、-90表示右旋轉(zhuǎn)的橫向模式。event對(duì)象不包含任何信息：

window.onload = function () {
    var div = document.getElementById("info");
    div.innerHTML = "Current orientation is " + window.orientation;
};
window.addEventListener("orientationchange", function () {
    div.innerHTML = "Current orientation is " + window.orientation;
});

MozOrientation事件，該事件已被移除，應(yīng)該使用DeviceOrientationEvent事件
Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.

但是DeviceOrientationEvent事件仍然是實(shí)驗(yàn)性的事件，目前有部分瀏覽器暫時(shí)不支持。

該事件的意圖是告訴開發(fā)者設(shè)備在空間中朝向哪兒，設(shè)備在三維空間中是靠x、y、z軸來定位的。

事件對(duì)象包含：

alpha：圍繞z軸旋轉(zhuǎn)，y軸的度數(shù)差；0~360的值；

beta：圍繞x軸旋轉(zhuǎn)，z軸的度數(shù)差；-180~180的值；

gamma：圍繞y軸旋轉(zhuǎn)，z軸的度數(shù)差；-90~90的值；

absolute：表示設(shè)備是否返回一個(gè)絕對(duì)值；

compassCalibrated：表示設(shè)備的指南針是否校準(zhǔn)過；

如：

丄

window.addEventListener("deviceorientation", function () {
    var info = document.getElementById("info");
    info.style.webkitTransform = "rotate(" + -Math.round(event.alpha) + "deg)";
});

該事件是要告訴開發(fā)者設(shè)備什么時(shí)候移動(dòng)，如通過該事件檢測(cè)設(shè)備是否在往下掉，是否被走著的人拿在手里等等。

屬性：

acceleration：包含x、y、z屬性的對(duì)象，不考慮重力的情況下，每個(gè)方向的加速度；

accelerationIncludingGravity：包含x、y、z屬性的對(duì)象，在考慮z自然重力加速度的情況下，每個(gè)方向上的加速度；

interval：毫秒值，必須在另一個(gè)devicemotion事件觸發(fā)前傳入；

rotationRate：包含表示方向的alpha、beta和gamma屬性的對(duì)象；

如果讀取不到值，會(huì)返回null，所以應(yīng)該先檢測(cè)它們的值是否為null：

window.addEventListener("devicemotion", function () {
    if (event.rotationRate !== null) {
        // statement
    }
});

touchstart：觸摸屏幕時(shí)觸發(fā)；

touchmove：滑動(dòng)時(shí)觸發(fā)，調(diào)用preventDefault()函數(shù)可阻止?jié)L動(dòng)；

touchend：當(dāng)手指從屏幕上移開時(shí)觸發(fā)；

touchcancel：當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)；

上面的事件都會(huì)冒泡，都可以取消。每個(gè)觸摸事件的event對(duì)象都提供了在鼠標(biāo)事件中常見的屬性。

touches：表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組；

targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組；

changedTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組；

每個(gè)Touch對(duì)象包含的屬性：

clientX：視口中的x坐標(biāo)；

clientY：；

identifier：標(biāo)識(shí)觸摸的唯一ID；

pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)；

pageY：；

screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)；

screenY：；

target：觸摸DOM節(jié)點(diǎn)目標(biāo)；

如：

function handleTouchEvent () {
    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 "touchmove":
                event.preventDefault();
                output.innerHTML = "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML = "Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
window.addEventListener("touchstart", handleTouchEvent);
window.addEventListener("touchmove", handleTouchEvent);
window.addEventListener("touchend", handleTouchEvent);

暫時(shí)不清楚為什么touchend無反應(yīng)。

gesturestart：當(dāng)一個(gè)手指已經(jīng)按在屏幕上而另一個(gè)手指又觸摸屏幕時(shí)觸發(fā)；

gesturechange：當(dāng)觸摸屏幕的任何一個(gè)手指的位置發(fā)生變化時(shí)觸發(fā)；

gestureend：當(dāng)任何一個(gè)手指從屏幕上面移開時(shí)觸發(fā)；

其中event還包括除鼠標(biāo)事件的屬性之外另外兩個(gè)屬性：rotation和scale：其中rotation屬性表示旋轉(zhuǎn)的角度，從0開始，負(fù)值表示逆時(shí)針旋轉(zhuǎn)，正值表示順時(shí)針旋轉(zhuǎn)；scale屬性從1開始，隨著距離拉大而增加，隨著距離縮小而減小：

var output = document.getElementById("output");
document.addEventListener("gesturestart", function () {
    output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});
document.addEventListener("gestureend", function () {
    output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});
document.addEventListener("gesturechange", function () {
    event.preventDefault();
    output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
});

寫成：

function handleGestureEvent() {
    var output = document.getElementById("output");
    switch (event.type) {
        case "gesturestart":
            output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
            break;
        case "gestureend":
            output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
            break;
        case "gesturechange":
            event.preventDefault();
            output.innerHTML = "rotation: " + event.rotation + ";" + "scale: " + event.scale;
            break;
    }
}
document.addEventListener("gesturestart", handleGestureEvent);
document.addEventListener("gestureend", handleGestureEvent);
document.addEventListener("gesturechange", handleGestureEvent);