JavaScript高程學習筆記之事件(13)

JavaScript高程學習筆記之事件(13)

@(JavaScript)[學習筆記]

---

[TOC]

---

1. 事件流

事件流描述從頁面中接收事件的順序

1.1 事件冒泡

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

1.2 事件捕獲

Netscape團隊提出另外一種事件流事件捕獲，不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件

1.3 DOM事件流

「DOM2級事件」規定的事件流包含3個階段：事件捕獲階段，處於目標階段和事件冒泡階段

2. 事件處理程序

響應某個事件的函數叫作事件處理程序。名字以on開頭，onclick，onload

2.1 HTML事件處理程序

某個元素支持的每種事件，均可以使用與相應事件處理程序同名的HTML特性來指定。特性的值是應該可以執行的JavaScript代碼 指定事件處理程序。函數中會有一個局部變量event

2.2 DOM0級事件處理程序

將一個函數賦值給事件處理程序屬性，在事件處理程序能夠用this訪問元素的任何屬性和方法。

2.3 DOM2級事件處理程序

DOM2級事件處理程序定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener() 接收3個參數：要處理的事件名、做爲事件處理程序的函數和函數的一個布爾值。 true表示在捕獲階段調用事件處理程序，false表示在冒泡階段調用事件處理程序。

2.4 IE事件處理程序

IE實現了與DOM中相似的兩個方法：attachEvent()和detachEvent()。接收兩個參數：事件處理程序名稱和事件處理程序函數。都會添加冒泡階段 attachEvent()第一個參數是"onclick"，而不是DOM中的"click" IE中使用上述方法與DOM0級事件的主要區別在於做用域，上述方法事件處理程序會在全局做用域中運行，所以this=window。 能夠爲同一按鈕添加添加多個事件處理程序，執行順序是倒序，而非正序

2.5 跨瀏覽器的事件處理程序

恰當使用能力檢測。保證處理事件的代碼能在大多數瀏覽器中運行，只需關注冒泡階段 addHandler()方法和removeHandler()方法，添加和移出事件處理函數

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;
        }
    },
        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;
        }
    },
    }

3. 事件對象

觸發DOM上的某個事件，會產生一個事件對象event，這個對象包含全部與事件有關的信息。

3.1 DOM事件對象

兼容DOM的瀏覽器會將一個event對象傳入事件處理程序 在事件處理程序內部，對象this始終等於currentTarget的值，而target只包含事件的實際目標。若是將事件處理程序指定給目標元素，則三個值相等

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

用type屬性處理多個程序 阻止特定事件的默認行爲preventDefault()方法 中止事件在DOM層次中的傳播stopPropagation()方法 eventPhase屬性，肯定事件位於事件處理程序的階段

3.2 IE中事件對象

有幾種不一樣的方式訪問IE中的event對象 DOM0級：event對象做爲window對象的一個屬性 attachEvent()添加：event對象做爲參數傳入函數 HTML特性：經過名叫event的變量訪問

3.3 跨瀏覽器的事件對象

對EventUtil對象加以加強

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;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    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;
        }
    },
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

4. 事件類型

「DOM3級事件」規定了幾類事件

• UI事件
• 焦點事件
• 鼠標事件
• 滾輪事件
• 文本事件
• 鍵盤事件
• 合成事件
• 變更事件
• 變更名稱事件

4.1 UI事件

1. load事件 頁面徹底加載時就會觸發load事件 兩中方法定義onload事件， 第一種：使用跨瀏覽器對象EventUtil 第二種：爲body元素添加onload特性
2. unload事件 文檔徹底卸載後觸發。用戶從一個頁面切換另外一個頁面，發生unload事件。利用這個事件最多的狀況是清除引用，避免內存泄漏 兩個方法 第一種：使用跨瀏覽器對象EventUtil 第二種：：爲body元素添加unload特性
3. resize事件 當瀏覽器窗口被調整到新的高度或寬度，就會觸發resize事件。 經過JavaScript或者body元素onresize特性處理
4. scroll事件 文檔滾動期間被觸發，輸出頁面的垂直滾動位置

4.2 焦點事件

會在頁面元素得到或失去焦點時觸發。利用這些事件與document.hasFocu()方法和document.activeElement屬性配合，知曉頁面行蹤 6個焦點事件：blur, DOMFocusIn, DOMFocusOut, focus, focusin, focusout

4.3 鼠標與滾輪事件

DOM3定義了9個鼠標事件： click，dblclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup

4.4 鍵盤與文本事件

對鍵盤事件的支持主要遵循DOM0級。 「DOM3級事件」仍然有許多遺留問題，有3個鍵盤事件 keydown，keypress，keyup

4.5 複合事件

處理IME的輸入序列

4.6 變更事件

DOM2級的變更事件能在DOM中的某一部分發生變化時給出提示

4.7 HTML5事件

contextmenu事件 beforeunload事件 DOMContentLoaded事件 readystatechage事件 pageshow和pagehide事件 haschage事件

4.8 設備事件

orientationchage事件 MozeOrientation事件 deviceorientation事件 devicemotion事件