JS 事件與事件對象小結

JavaScript與HTML之間的交互是通過事件來實現的。IE9，chrome，Firefox，Opera，Safari均實現了DOM2級規范中定義的標准DOM事件，而IE8和IE8以下版本仍然保留專有的事件處理方式。

一些基本概念：

• 事件：是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
• 事件流：描述的是頁面中接受事件的順序。事件捕獲 -->  事件目標 -->  事件冒泡
• 事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點(document).
• 事件捕獲：事件開始時由不太具體的節點先接收事件，然后向下傳播到最具體的節點。

而js中事件監聽方法總共有三種，分別如下所示：

• element.addEventListener(type, listener[, useCapture]); // IE6~8不支持，支持事件冒泡和捕獲
• element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持，只支持事件冒泡
• element[’on’ + type] = function(){} // 所有瀏覽器，只支持事件冒泡，不支持對同一個元素的同一個事件注冊多個事件監聽器

我們把事件綁定以及事件解綁封裝成為一個函數，兼容瀏覽器，包括IE6及以上

// 事件綁定
function addEvent(element, eType, handle, bol) {
    if(element.addEventListener){           //如果支持addEventListener
        element.addEventListener(eType, handle, bol);
    }else if(element.attachEvent){          //如果支持attachEvent
        element.attachEvent("on"+eType, handle);
    }else{                                  //否則使用兼容的onclick綁定
        element["on"+eType] = handle;
    }
}

　　

function removeEvent(element, eType, handle, bol) {
    if(element.addEventListener){
        element.removeEventListener(eType, handle, bol);
    }else if(element.attachEvent){
        element.detachEvent("on"+eType, handle);
    }else{
        element["on"+eType] = null;
    }
}

不是所有的事件都能冒泡，例如：blur、focus、load、unload，

事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event。這個對象中包含着所有與事件有關的信息。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息。

• 支持至少DOM2級的瀏覽器所有事件的事件對象，都會有的成員。

屬性方法	類型	讀寫	說明
bubbles	Blooean	只讀	表明事件是否冒泡
stopPropagation()	Function	只讀	取消事件的進一步捕獲或冒泡，如果bubbels為true，則可以使用這個方法
cancelable	Blooean	只讀	表明是否可以取消事件的默認行為
preventDefault()	Function	只讀	取消事件的默認行為，如果cancelable為true，則可以使用這個方法
currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素
target	Element	只讀	事件的目標
detail	Integar	只讀	與事件相關的細節信息
eventPhase	Integar	只讀	調用事件處理程序的階段：1表示捕獲階段2表示處於目標3表示冒泡階段
trusted	Blooean	只讀	為true表示事件是瀏覽器生成的，為false表示事件是由開發人員通過js創建的
type	String	只讀	被觸發的事件的類型
view	AbstractView	只讀	與事件關聯的抽象視圖。等同於發生事件的window對象

注意：

currentTarget: this對象始終等於他的值，隨着事件冒泡或者捕獲，他得值等於捕獲或冒泡到的上級元素的值。
target：只包含事件的實際目標。

• IE中的事件對象

                               在IE8及其以前版本的瀏覽器是不兼容DOM2級的，但是還是可以使用dom0級的方法添加事件處理程序。

屬性方法	類型	讀寫	說明
cancelBubble	Blooean	讀寫	默認值為false，但將其設置為true就可以取消事件冒泡，與DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	讀寫	默認值為true，但將其設置為fasle，就可以取消事件的默認行為，與DOM中的preventDefault()方法的作用相同
srcElement	Element	只讀	事件的目標，與DOM中的target屬性相同
type	String	只讀	被觸發的事件類型

• 跨瀏覽器的事件對象

       這是一個通用的事件偵聽函數，看代碼就會懂很多問題！

 

var EventUtil={
    getEvent:function(event){
        return event||window.event;
    },
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    preventDefault:function(){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    stopPropagation:function(){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
             element["e"+type]=function(){
              handler.call(element)
          }
            element.attachEvent("on"+type,element["e"+type]);
        }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,element["e"+type]);
  element["e"+type]=null;    
        }else{
            element["on"+type]=null;
        }
    }

  };