jap69韩国,亚洲日韩成人无码,四虎影院网红美女

事件類型

Web 瀏覽器中可能發生的事件有很多類型
- UI事件：當用戶與界面上的元素交互時觸發。
- 焦點事件：當元素獲得或失去焦點時觸發。
- 滾輪事件：當使用鼠標滾輪時觸發。
- 文本事件：當在文檔中輸入文本時觸發。
- 鍵盤事件：但用戶通過鍵盤在頁面上執行操作時觸發。
- 合成事件：當為輸入法編輯器輸入字符時觸發。
- 變動事件：當底層DOM結構發生變化時觸發。

//事件處理程序
var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

1、UI事件

UI 事件指的是那些不一定與用戶操作有關的事件。

(1)load事件

load在當頁面完全加載后在window上面觸發，當所有框架都加載完畢時在框架集上面觸發，當圖像加載完畢時在<img>元素上面觸發，或者當嵌入的內容加載完畢時在<object>元素上面觸發。

//第一種定義onload 事件處理程序的方式
EventUtil.addHandler(window, "load", function(event){
    alert("Loaded!");
});

<!--第二種指定onload 事件處理程序的方式-->
<!DOCTYPE html>
<html>
    <head>
        <title>Load Event Example</title>
    </head>
    <body onload="alert('Loaded!')">
    </body>
</html>

(2)unload事件

unload，當頁面完全卸載后在window上面觸發，當所有框架都卸載后在框架集上面觸發，或者當嵌入的內容卸載完畢后在<object>元素上面觸發。
只要用戶從一個頁面切換到另一個頁面，就會發生unload事件。而利用這個事件最多的情況是清除引用，以避免內存泄漏。

EventUtil.addHandler(window, "unload", function(event){
    alert("Unloaded");
});

<!DOCTYPE html>
<html>
    <head>
        <title>Unload Event Example</title>
    </head>
    <body onunload="alert('Unloaded!')">
    </body>
</html>

(3)resize事件

resize|當窗口或框架的大小變化時在window 或框架上面觸發。
瀏覽器窗口最小化或最大化時也會觸發resize 事件。

EventUtil.addHandler(window, "resize", function(event){
    alert("Resized");
});

(4)scroll事件

scroll，當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。

EventUtil.addHandler(window, "scroll", function(event){
    if (document.compatMode == "CSS1Compat"){
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
});

(5)abort

abort，在用戶停止下載過程時，如果嵌入的內容沒有加載完，則在<object>元素上面觸發。

(6)error

error，當發生JavaScript錯誤時在window上面觸發，當無法加載圖像時在<img>元素上面觸發，當無法加載嵌入內容時在<object>元素上面觸發，或者當有一或多個框架無法加載時在框架集上面觸發

(7)select

select，當用戶選擇文本框（<input>或<texterea>）中的一或多個字符時觸發。

2、焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發，有以下6 個焦點事件。
- blur：在元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
- focus：在元素獲得焦點時觸發。這個事件不會冒泡；所有瀏覽器都支持它。
- focusin：在元素獲得焦點時觸發。這個事件與HTML 事件focus 等價，但它冒泡。
- focusout：在元素失去焦點時觸發。這個事件是HTML 事件blur 的通用版本。
當焦點從頁面中的一個元素移動到另一個元素，會依次觸發下列事件：
(1) focusout 在失去焦點的元素上觸發；
(2) focusin 在獲得焦點的元素上觸發；
(3) blur 在失去焦點的元素上觸發；
(4) DOMFocusOut 在失去焦點的元素上觸發；
(5) focus 在獲得焦點的元素上觸發；
(6) DOMFocusIn 在獲得焦點的元素上觸發。
其中，blur、DOMFocusOut和focusout的事件目標是失去焦點的元素；而focus、DOMFocusIn和focusin 的事件目標是獲得焦點的元素。
要確定瀏覽器是否支持這些事件，可以使用如下代碼：

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

3、鼠標與滾輪事件

click：在用戶單擊主鼠標按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。
dblclick：在用戶雙擊主鼠標按鈕（一般是左邊的按鈕）時觸發。
mousedown：在用戶按下了任意鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內時觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。
mouseleave：在位于元素上方的鼠標光標移動到元素范圍之外時觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。
mousemove：當鼠標指針在元素內部移動時重復地觸發。不能通過鍵盤觸發這個事件。
mouseout：在鼠標指針位于一個元素上方，然后用戶將其移入另一個元素時觸發。
mouseover：在鼠標指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內時觸發。不能通過鍵盤觸發這個事件。
mouseup：在用戶釋放鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
要檢測瀏覽器是否支持上面的所有事件，可以使用以下代碼：

var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")

鼠標事件中還有一類滾輪事件。而說是一類事件，其實就是一個mousewheel 事件。這個事件跟蹤鼠標滾輪。

(1)客戶區坐標位置

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Client coordinates: " + event.clientX + "," + event.clientY);
});

(2)頁面坐標位置

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Page coordinates: " + event.pageX + "," + event.pageY);
});

IE8 及更早版本不支持事件對象上的頁面坐標，不過使用客戶區坐標和滾動信息可以計算出來。

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var pageX = event.pageX,
    pageY = event.pageY;
    if (pageX === undefined){
        pageX = event.clientX + (document.body.scrollLeft ||
        document.documentElement.scrollLeft);
    }
    if (pageY === undefined){
        pageY = event.clientY + (document.body.scrollTop ||
        document.documentElement.scrollTop);
    }
    alert("Page coordinates: " + pageX + "," + pageY);
});

(3)屏幕坐標位置

通過screenX 和screenY屬性可以確定鼠標事件發生時鼠標指針相對于整個屏幕的坐標信息。

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

(4)修改鍵

在按下鼠標時鍵盤上的某些鍵的狀態也可以影響到所要采取的操作。

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var keys = new Array();
    if (event.shiftKey){
        keys.push("shift");
    }
    if (event.ctrlKey){
        keys.push("ctrl");
    }
    if (event.altKey){
        keys.push("alt");
    }
    if (event.metaKey){
        keys.push("meta");
    }
    alert("Keys: " + keys.join(","));
});

(5)相關元素

在發生mouseover 和mouserout 事件時，還會涉及更多的元素。
對mouseover 事件而言，事件的主目標是獲得光標的元素，而相關元素就是那個失去光標的元素。
對mouseout 事件而言，事件的主目標是失去光標的元素，而相關元素則是獲得光標的元素。
DOM通過event 對象的relatedTarget 屬性提供了相關元素的信息。
IE8及之前版本不支持relatedTarget屬性，但提供了保存著同樣信息的不同屬性。在mouseover 事件觸發時，IE 的fromElement屬性中保存了相關元素；在mouseout事件觸發時，IE 的toElement 屬性中保存著相關元素。

<!DOCTYPE html>
<html>
    <head>
    <title>Related Elements Example</title>
    </head>
    <body>
        <div id="myDiv" style="background-color:red;">test</div>
    </body>
</html>

var EventUtil = {
//省略了其他代碼
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
//省略了其他代碼
};

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var relatedTarget = EventUtil.getRelatedTarget(event);
    alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});

(6)鼠標按鈕

DOM的button 屬性可能有如下3 個值：
- 0 表示主鼠標按鈕。
- 1 表示中間的鼠標按鈕（鼠標滾輪按鈕）。
- 2 表示次鼠標按鈕。
- 在常規的設置中，主鼠標按鈕就是鼠標左鍵，而次鼠標按鈕就是鼠標右鍵。
IE8 及之前版本也提供了button 屬性，但這個屬性的值與DOM的button屬性有很大差異。
- 0：表示沒有按下按鈕。
- 1：表示按下了主鼠標按鈕。
- 2：表示按下了次鼠標按鈕。
- 3：表示同時按下了主、次鼠標按鈕。
- 4：表示按下了中間的鼠標按鈕。
- 5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕。
- 6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕。
- 7：表示同時按下了三個鼠標按鈕。

var EventUtil = {
    //省略了其他代碼
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
            }
        }
    },
    //省略了其他代碼
};
var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "mousedown", function(event){
    event = EventUtil.getEvent(event);
    alert(EventUtil.getButton(event));
});

(7)鼠標滾輪事件

與mousewheel 事件對應的event對象除包含鼠標事件的所有標準信息外，還包含一個特殊的wheelDelta 屬性。
當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向后滾動鼠標滾輪時，wheelDelta 是-120 的倍數。

EventUtil.addHandler(document, "mousewheel", function(event){
    event = EventUtil.getEvent(event);
    alert(event.wheelDelta);
});

(8)觸摸設備

不支持dblclick事件，雙擊瀏覽器窗口放大畫面。
輕擊可單擊元素會觸發mousemove 事件。
mousemove 事件也會觸發mouseover 和mouseout 事件。
兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel 和scroll 事件。

4、鍵盤與文本事件

keydown: 當用戶按下鍵盤上的任意鍵時觸發，若按住不放，會重復觸發。
keypress:當用戶按下鍵盤上的字符鍵時觸發，若按住不放，會重復觸發。按下ESC鍵也會觸發這個事件。
keyup：當用戶釋放鍵盤上的鍵時觸發。

(1)鍵碼

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
    event = EventUtil.getEvent(event);
    alert(event.keyCode);
});

(2)字符編碼

IE9、Firefox、Chrome 和Safari 的event 對象都支持一個charCode 屬性，這個屬性只有在發生keypress事件時才包含值，而且這個值是按下的那個鍵所代表字符的ASCII 編碼。此時的keyCode通常等于0 或者也可能等于所按鍵的鍵碼。

//跨瀏覽器取得字符編碼
var EventUtil = {
    //省略的代碼
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    //省略的代碼
};
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    alert(EventUtil.getCharCode(event));
});

(3)DOM3級變化

DOM3級事件中的鍵盤事件，不再包含charCode 屬性，而是包含兩個新屬性：key和char。
在按下某個字符鍵時，key的值就是相應的文本字符（如“k”或“M”）；在按下非字符鍵時， key 的值是相應鍵的名（如“Shift”或“Down”）。
char 屬性在按下字符鍵時的行為與key 相同，但在按下非字符鍵時值為null。
IE9 支持key 屬性，但不支持char 屬性。Safari 5 和Chrome 支持名為keyIdentifier 的屬性，在按下非字符鍵（例如Shift）的情況下與key的值相同。
對于字符鍵，keyIdentifier 返回一個格式類似“U+0000”的字符串，表示Unicode 值。

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var identifier = event.key || event.keyIdentifier;
    if (identifier){
        alert(identifi er);
    }
});

由于存在跨瀏覽器問題，因此不推薦使用key、keyIdentifier 或char。

(4)textInput事件

當用戶在可編輯區域中輸入字符時，就會觸發textInput事件。
這個用于替代keypress 的textInput 事件的行為稍有不同。
- 任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。
- textInput 事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發。
由于textInput 事件主要考慮的是字符，因此它的event對象中還包含一個data屬性，這個屬性的值就是用戶輸入的字符（而非字符編碼）。

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});

5、復合事件

復合事件，用于處理IME 的輸入序列。
IME（Input Method Editor，輸入法編輯器）可以讓用戶輸入在物理鍵盤上找不到的字符。
復合事件就是針對檢測和處理這種輸入而設計的。有以下三種復合事件。
- compositionstart：在IME 的文本復合系統打開時觸發，表示要開始輸入了。
- compositionupdate：在向輸入字段中插入新字符時觸發。
- compositionend：在IME 的文本復合系統關閉時觸發，表示返回正常鍵盤輸入狀態。
在觸發復合事件時，目標是接收文本的輸入字段。但它比文本事件的事件對象多一個屬性data，其中包含以下幾個值中的一個。
- 如果在compositionstart事件發生時訪問，包含正在編輯的文本；
- 如果在compositionupdate 事件發生時訪問，包含正插入的新字符；
- 如果在compositionend 事件發生時訪問，包含此次輸入會話中插入的所有字符。

var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "compositionstart", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});
EventUtil.addHandler(textbox, "compositionupdate", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});
EventUtil.addHandler(textbox, "compositionend", function(event){
    event = EventUtil.getEvent(event);
    alert(event.data);
});

要確定瀏覽器是否支持復合事件，可以使用以下代碼

var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0");

6、變動事件

DOMSubtreeModified：在DOM 結構中發生任何變化時觸發。這個事件在其他任何事件觸發
后都會觸發。
DOMNodeInserted：在一個節點作為子節點被插入到另一個節點中時觸發。
DOMNodeRemoved：在節點從其父節點中被移除時觸發。
DOMNodeInsertedIntoDocument：在一個節點被直接插入文檔或通過子樹間接插入文檔之后觸發。這個事件在DOMNodeInserted 之后觸發。
DOMNodeRemovedFromDocument：在一個節點被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發。這個事件在DOMNodeRemoved 之后觸發。
DOMAttrModified：在特性被修改之后觸發。
DOMCharacterDataModified：在文本節點的值發生變化時觸發。

<! DOCTYPE html>
<html>
    <head>
        <title>Node Removal Events Example</title>
    </head>
    <body>
        <ul id="myList">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

(1)刪除節點

//假設要移除<ul>元素，驗證以上事件發生的順序。
EventUtil.addHandler(window, "load", function(event){
    var list = document.getElementById("myList");
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
        alert(event.type);
        alert(event.target);
    });
    EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
        alert(event.type);
        alert(event.target);
        alert(event.relatedNode);
    });
    EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", 
    function(event){
        alert(event.type);
        alert(event.target);
    });
    list.parentNode.removeChild(list);
});

(2)插入節點

//假設要為<ul>添加一個<li>元素，驗證以上事件發生的順序。
EventUtil.addHandler(window, "load", function(event){
    var list = document.getElementById("myList");
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Item 4"));
    EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
        alert(event.type);
        alert(event.target);
    });
    EventUtil.addHandler(document, "DOMNodeInserted", function(event){
        alert(event.type);
        alert(event.target);
        alert(event.relatedNode);
    });
    EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
        alert(event.type);
        alert(event.target);
    });
    list.appendChild(item);
});

7、HTML5事件

(1)contextmenu事件

由于contextmenu 事件是冒泡的，因此可以為document指定一個事件處理程序，用以處理頁面中發生的所有此類事件。
這個事件的目標是發生用戶操作的元素。在所有瀏覽器中都可以取消這個事件。
通常使用contextmenu事件來顯示自定義的上下文菜單，而使用onclick事件處理程序來隱藏該菜單。

<!DOCTYPE html>
<html>
    <head>
        <title>ContextMenu Event Example</title>
    </head>
    <body>
        <div id="myDiv">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.</div>
        <ul id="myMenu" style="position:absolute;visibility:hidden;
        background-color:silver">
            <li><a >Nicholas’ site</a></li>
            <li><a >Wrox site</a></li>
            <li><a >Yahoo!</a></li>
        </ul>
    </body>
</html>

EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "contextmenu", function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
        var menu = document.getElementById("myMenu");
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        menu.style.visibility = "visible";
    });
    EventUtil.addHandler(document, "click", function(event){
        document.getElementById("myMenu").style.visibility = "hidden";
    });
});

(2)beforeunload事件

這個事件會在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載并繼續使用原有頁面。
這個事件的意圖是將控制權交給用戶。顯示的消息會告知用戶頁面行將被卸載（正因為如此才會顯示這個消息），詢問用戶是否真的要關閉頁面，還是希望繼續留下來。

EventUtil.addHandler(window, "beforeunload", function(event){
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go.";
    event.returnValue = message;
    return message;
});

(3)DOMCdontentLoaded事件

DOMContentLoaded 事件在形成完整的DOM 樹之后就會觸發，不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經下載完畢。
要處理DOMContentLoaded事件，可以為document或window添加相應的事件處理程序（盡管這個事件會冒泡到window，但它的目標實際上是document）

EventUtil.addHandler(document, "DOMContentLoaded", function(event){
    alert("Content loaded");
});

(4)hashchange事件

HTML5 新增了hashchange事件，以便在URL的參數列表（及URL中“#”號后面的所有字符串）發生變化時通知開發人員。
必須要把hashchange 事件處理程序添加給window對象，然后URL參數列表只要變化就會調用它。
此時的event 對象應該額外包含兩個屬性：oldURL和newURL。這兩個屬性分別保存著參數列表變化前后的完整URL。

EventUtil.addHandler(window, "hashchange", function(event){
    alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});

只有Firefox 6+、Chrome和Opera支持oldURL和newURL屬性。為此，最好是使用location對象來確定當前的參數列表。

EventUtil.addHandler(window, "hashchange", function(event){
    alert("Current hash: " + location.hash);
});

使用以下代碼可以檢測瀏覽器是否支持hashchange 事件。

var isSupported = ("onhashchange" in window) && (document.documentMode ===
undefined || document.documentMode > 7);

8、設備事件

(1)orientationchange事件

蘋果公司為移動Safari中添加了orientationchange事件，以便開發人員能夠確定用戶何時將設備由橫向查看模式切換為縱向查看模式。
移動Safari 的window.orientation屬性中可能包含3個值：0表示肖像模式，90表示向左旋轉的橫向模式（“主屏幕”按鈕在右側），-90表示向右旋轉的橫向模式（“主屏幕”按鈕在左側）。

EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    div.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        div.innerHTML = "Current orientation is " + window.orientation;
    });
});

所有iOS 設備都支持orientationchange 事件和window.orientation 屬性。

(2)MozOrientation 事件

Firefox 3.6 為檢測設備的方向引入了一個名為MozOrientation的新事件。當設備的加速計檢測到設備方向改變時，就會觸發這個事件。

EventUtil.addHandler(window, "MozOrientation", function(event){
    //響應事件
});

此時的event 對象包含三個屬性：x、y和z。這幾個屬性的值都介于1到-1之間，表示不同坐標軸上的方向。
如果設備向右傾斜，x值會減小；反之，向左傾斜，x值會增大。z軸檢測垂直加速度度，1 表示靜止不動，在設備移動時值會減小。
只有帶加速計的設備才支持MozOrientation 事件.

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.

(3)deviceorientation 事件

觸發deviceorientation事件時，事件對象中包含著每個軸相對于設備靜止狀態下發生變化的信息。事件對象包含以下5 個屬性。
- alpha：在圍繞z 軸旋轉時（即左右旋轉時），y 軸的度數差；是一個介于0 到360 之間的浮點數。
- beta：在圍繞x 軸旋轉時（即前后旋轉時），z 軸的度數差；是一個介于-180 到180 之間的浮點數。
- gamma：在圍繞y 軸旋轉時（即扭轉設備時），z 軸的度數差；是一個介于-90 到90 之間的浮點數。
- absolute：布爾值，表示設備是否返回一個絕對值。
- compassCalibrated：布爾值，表示設備的指南針是否校準過。

EventUtil.addHandler(window, "deviceorientation", function(event){
    var output = document.getElementById("output");
    output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta +
    ", Gamma=" + event.gamma + "<br>";
});

通過這些信息，可以響應設備的方向，重新排列或修改屏幕上的元素。要響應設備方向的改變而旋轉元素。

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

(4)devicemotion 事件

DeviceOrientation Event 規范還定義了一個devicemotion 事件，通過devicemotion 能夠檢測到設備是不是正在往下掉，或者是不是被走著的人拿在手里。
觸發devicemotion 事件時，事件對象包含以下屬性。
- acceleration：一個包含x、y和z屬性的對象，在不考慮重力的情況下，告訴你在每個方向上的加速度。
- accelerationIncludingGravity：一個包含x、y和z屬性的對象，在考慮z軸自然重力加速度的情況下，告訴你在每個方向上的加速度。
- interval：以毫秒表示的時間值，必須在另一個devicemotion事件觸發前傳入。這個值在每個事件中應該是一個常量。
- rotationRate：一個包含表示方向的alpha、beta 和gamma 屬性的對象。

EventUtil.addHandler(window, "devicemotion", function(event){
    var output = document.getElementById("output");
    if (event.rotationRate !== null){
        output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" +
        event.rotationRate.beta + ", Gamma=" +
        event.rotationRate.gamma;
    }
});

9、觸摸與手勢事件

(1)觸摸事件

觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。

名稱	詳細
touchstart	當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
touchmove	當手指在屏幕上滑動時連續地觸發。在這個事件發生期間，調用preventDefault()可以阻止滾動。
touchend	當手指從屏幕上移開時觸發。
touchcancel	當系統停止跟蹤觸摸時觸發。

每個觸摸事件的event對象都提供了在鼠標事件中常見的屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、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 += "<br>Touch ended (" +
            event.changedTouches[0].clientX + "," +
            event.changedTouches[0].clientY + ")";
            break;
        case "touchmove":
            event.preventDefault(); //阻止滾動
            output.innerHTML += "<br>Touch moved (" +
            event.changedTouches[0].clientX + "," +
            event.changedTouches[0].clientY + ")";
            break;
        }
    }
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

(2)手勢事件

當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件。

名稱	詳細
gesturestart	當一個手指已經按在屏幕上而另一個手指又觸摸屏幕時觸發。
gesturechange	當觸摸屏幕的任何一個手指的位置發生變化時觸發。
gestureend	當任何一個手指從屏幕上面移開時觸發。

每個手勢事件的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 += "<br>Gesture ended (rotation=" + event.rotation +
        ",scale=" + event.scale + ")";
        break;
    case "gesturechange":
        output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
        ",scale=" + event.scale + ")";
        break;
    }
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

好好學習

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

【javascript】事件類型

【javascript】事件類型

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

【javascript】事件類型

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频