js-JavaScript高級程序設計學習筆記8

第十三章 事件

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

2、大部分瀏覽器都會在捕獲階段出發對象上的事件，結果就是，有兩個機會在目標對象上面操作事件。

3、事件是用戶或瀏覽器自身執行的某種動作，比如click、load、mouseover，都是事件的名字。而響應某個事件的函數就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以on開頭，如onclick。

4、HTML事件處理程序不推薦使用，HTML和JS代碼緊密耦合，不方便維護。

5、DOM0級事件處理程序——通過JS指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。如btn.onclick=function(){//代碼};可被認為是元素的方法，是在元素的作用域中運行，程序中this引用當前元素。

6、DOM2級事件處理程序定義了兩個方法，用於處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。接收三個參數，要處理的事件名（click，沒有on，因為是事件名稱）、作為事件處理程序的函數和一個布爾值。布爾值為true時表示在捕獲階段調用，false表示在冒泡階段調用。DOM2級方法添加事件的主要好處時可以添加多個事件處理程序，會按照添加順序觸發。通過addEventListener（）添加的事件處理程序只能通過removeEventListener（）來移除，匿名函數無法移除。

7、IE事件處理程序，兩個方法：attachEvent（）和detachEvent（）。接收兩個參數：事件處理程序名稱（onclick，有on，因為是事件處理程序名稱）和事件處理程序函數。這個方法作用域是全局作用域，this等於window。可以添加多個事件，但是執行順序與添加順序相反！

8、DOM0級對每個事件只支持一個事件處理程序。強行對一個元素綁定兩個相同事件，只會執行最后一個事件。在這里相當於給一個元素設置了一個屬性，這個屬性只能有一個值，比如onmouseover屬性，它的值是某個函數的引用，再次綁定mouseover事件后，這個值將會被覆蓋。

9、跨瀏覽器的事件對象的信息和方法——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;
        }
    },
    //刪除事件處理程序
    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;
        }
    },
    //獲取event對象
    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;
        }
    },
    //阻止事件流
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
}

10、采用圖像預先加載時，若要在圖像加載完指定事件處理程序，則需要先綁定事件，再設置src屬性。新圖像在設置了src后立即開始下載。所以事件要放在設置src語句前，防止圖片加載過快（緩存），事件若在src語句后，則不會觸發onload。

11、<script>和<link>加載js和樣式表的時候，事件和指定src（href）的語句前后無所謂，因為指定src並需要把元素添加到文檔后才會開始下載。