《JavaScript高級程序設計（第3版）》——事件（十三）

時間 2019-11-10

標籤 javascript 高級程序設計事件十三欄目 JavaScript 简体版

原文原文鏈接

事件是將JavaScript與網頁聯繫在一塊兒的主要方式。

事件流

事件流：從頁面中接收到事件的順序。

事件冒泡

IE的事件流叫作事件冒泡：事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體 的節點（文檔）。javascript

事件捕獲

Netscape Communicator團隊提出的，與事件冒泡相反。html

用意：在事件到達預約目標以前捕獲它。java

DOM 事件流

「DOM2 級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。瀏覽器

事件處理程序

事件：用戶或瀏覽器自身執行的某種動做。如： click、 load、 mouseover等。
事件處理程序：響應某個事件的函數。函數

HTML事件處理程序性能

<script type="text/javascript">
    function showMessage(){
        alert("Hello World!");
    }
</script>

<input type="button" value ="Click Me" onclick="showMessage()" />

DOM0 級事件處理程序測試

添加

var btn = document.getElementById("myBtn");
btn.onclick = function (){
    alert(this.id);
}

刪除事件處理程序

btn.onclick = null;

DOM2 級事件處理程序this

addEventListener(要處理的事件名，做爲事件處理程序的函數，布爾值)code

removeEventListener(要處理的事件名，做爲事件處理程序的函數，布爾值)htm

布爾值：

true：在捕獲階段調用事件處理程序
false：在冒泡階段調用事件處理程序

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件處理程序
btn.addEventListener("click", hander, false);
// 刪除事件處理程序
btn.removeEventListener("click", hander, false);

主要好處：能夠添加多個事件處理程序，按照添加的順序觸發。

IE事件處理程序

attachEvent(事件處理程序名稱，事件處理程序函數)

detachEvent(事件處理程序名稱，事件處理程序函數)

var btn = document.getElementById("myBtn");
var hander = function(){
    alert(this.id);
};
// 添加事件處理程序
btn.attachEventr("onclick", hander);
// 刪除事件處理程序
btn.detachEvent("onclick", hander);

主要好處：能夠添加多個事件處理程序，按照添加相反的順序觸發。

跨瀏覽器的事件處理程序

addHander(要操做的元素，事件名稱，事件處理程序函數)

removeHander(要操做的元素，事件名稱，事件處理程序函數)

事件對象

event事件對象

阻止事件捕獲、事件冒泡：

var btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert("Clicked");
            event.stopPropagation();
        };
        
        document.body.onclick = function(event){
            alert("Body clicked");
        };

事件類型

UI事件：不必定與用戶操做有關的事件
- DOMActive 不建議使用
- load
- unload
- abort
- error
- resize
- scroll
焦點事件
- blur 失去焦點時不會冒泡
- DOMFocusIn 得到焦點冒泡
- DOMFocusOut 失去焦點
- focus 得到焦點不會冒泡
- focusin
- focusout
鼠標與滾輪事件
鍵盤與文本事件
- keydown
- keypress
- keyup
複合事件
變更事件
HTML5 事件
設備事件
觸摸與手勢事件

事件性能

事件處理程序是函數。
在JavaScript中，每一個函數都是對象，都會佔用內存。
內存中的對象越多，性能就越差。

事件委託

目的：解決「事件處理程序過多」問題。

實現：利用了事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件。

使用事件委託，只須要在 DOM 樹中儘可能最高的層次上添加一個事件處理程序。

以下例子，因爲全部列表項都是這個元素"myLinks"的子節點，並且它們的事件會冒泡，因此單擊事件最終會被這個函數處理。

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <ul id="myLinks">
        <li id="goSomewhere">Go somewhere</li>
        <li id="doSomething">Do something</li>
        <li id="sayHi">Say hi</li>
    </ul>
    <script type="text/javascript">
    (function(){
        var list = document.getElementById("myLinks");
        
        EventUtil.addHandler(list, "click", function(event){
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
        
            switch(target.id){
                case "doSomething":
                    document.title = "I changed the document's title";
                    break;
        
                case "goSomewhere":
                    location.href = "http://www.wrox.com";
                    break;
        
                case "sayHi":
                    alert("hi");
                    break;
            }
        });

    })();
    </script>
</body>
</html>