javaScript事件

JavaScript與HTML之間的交互是經過事件來實現的，IE九、chrome、FireFox、Opera、Safari 均實現了DOM級規範中定義的標準DOM事件，而IE8及IE8如下版本仍然保留着專有的事件處理方式（DOM0事件）。

一、一些基本概念：

• 事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

可使用偵聽器（或處理程序）來預約事件，以便事件發生時執行相應的代碼。

• 事件流：從頁面接受事件的順序。

IE的事件流是事件冒泡，Netscape開發團隊提出的事件流是事件捕獲；「DOM2級事件」規定的事件流包括三個階段：事件捕獲 --> 處於目標 --> 事件冒泡

• 事件捕獲：事件開始時從不太具體的節點先接收事件，而後向下傳播到最具體的節點，其用意在於在事件到達預約目標以前捕獲它。
• 事件冒泡：事件開始時從最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。

不是全部的事件都能冒泡，例如：blur、focus、load、unload.

二、監聽/移除事件的方法：

• element.addEventListener(type, listener[, useCapture]) element.removeEventListener(type, listener[, useCapture]) // 支持捕獲和冒泡，但IE8及IE8如下不支持， 其餘IE9及以上和其餘瀏覽器均支持，默認是false（冒泡階段執行） true(捕獲階段產生)
• element.attachEvent('on'+type, listener) element.detachEvent('on'+type, listener) // 只支持冒泡，只IE6-IE10支持，IE11不支持，其餘瀏覽器不支持
• element['on'+type] = function(){} // 只支持冒泡, 全部瀏覽器支持, 但不支持對同一個元素的同一事件註冊多個監聽器

三、事件對象event：

在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。全部的瀏覽器都支持event對象，但支持方式不一樣。

• 至少支持「DOM2級事件」的瀏覽器中事件的事件對象，所包含的屬性和方法：

屬性/方法	類型	讀/寫	說明
bubbles	Boolean	只讀	代表事件是否冒泡
cancelable	Boolean	只讀	代表是否能夠取消事件的默認行爲
currentTarget	Boolean	只讀	其事件處理程序當前正在處理事件的那個元素
defaultPrevented	Boolean	只讀	只讀 爲true時表示已經調用了preventDefault() (DOM3級事件中新增)
detail	Integer	只讀	與事件相關的細節信息
eventPhase	Integer	只讀	調用事件處理程序時的事件流階段：1表示捕獲階段，2表示處於目標階段，3表示冒泡階段
target	Element	只讀	事件的目標
trusted	Boolean	只讀	true表示事件是瀏覽器生成的，false表示事件是開發人員經過JavaScript建立的（DOM3級事件中新增）
type	String	只讀	事件的類型
view	AbstractView	只讀	與事件關聯的抽象視圖。等同於發生事件的window對象。
preventDefault()	Function	只讀	取消事件的默認行爲。若是cancelanle爲true，則可使用這個方法
stopPropagation()	Boolean	只讀	取消事件的進一步捕獲或冒泡。若是bubbles爲true，則可使用這個方法。
stopImmediatePropagation()	Boolean	只讀	取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增）

• IE中的事件對象 取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增）

屬性/方法	類型	讀/寫	說明
cancelBubble	Boolean	讀/寫	默認爲false，但將其設置爲true時就能夠取消事件冒泡
returnValue	Boolean	讀/寫	默認爲true，但將其設置爲false時就能夠取消事件的默認行爲
srcElement	Element	只讀	事件的目標
type	String	只讀	事件的類型

跨瀏覽器的事件處理程序

var EventUtil = {
    getEvent: function(event){
        return event || window.event;       // IE、chrome、360二者皆有，firefox只有event
    },
    getTarget: function(event){
        var evt = this.getEvent(event);
        return evt.target || evt.srcElement;
    },
    preventDefault: function(event){
        var evt = this.getEvent(event);
        if(evt.preventDefault){
            evt.preventDefault();
        }else{
            evt.returnValue = false;
        }
    },
    stopPropagation: function(event){
        var evt = this.getEvent(event);
        if(evt.stopPropagation){
            evt.stopPropagation();
        }else{
            evt.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);//好處：一、以attachEvent綁定事件，事件處理函數的做用域爲window，經過call方法，改變做用域；2，方法註冊到element上，方便移除事件處理函數；壞處：一個元素上的同一事件只能綁定一次
            };
            element.attachEvent('on'+type, element['e'+type]);
        }else{
            element['on'+type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if(element.removeEventListener){
            element.remoeEventListener(type, handler, false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type, element['e'+type]);
            element['e'+type] = null;
        }else{
            element['on'+type] = null;
        }
    },
    /*
    * 獲取鼠標按鈕的值
    * DOM模型下的button屬性：0表示主鼠標按鈕 1表示中間的鼠標按鈕（中間滾輪） 2表示次鼠標按鈕
    * IE8及以前版本也提供了button屬性，可是與DOM的button屬性有很大差異，具體以下
    * 0：沒有按下按鈕  1：按下了主鼠標按鈕  2：按下了次鼠標按鈕  3：同時按下了主、次鼠標按鈕  4：按下了中間的鼠標按鈕  5：同時按下了主鼠標和中間鼠標按鈕
    * 6：同時按下了次鼠標和中間鼠標按鈕  7：同時按下了三個鼠標按鈕
    */
    getMouseButton: function(event){
        var evt = this.getEvent(event);
        if(document.implementation.hasFeature("MouseEvents", "2.0")){
            return evt.button;
        } else {
            switch(evt.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 1;
                case 4:
                    return 2;    
            }
        }
    },
     /*
    * 獲取鼠標滾動時的wheelDelta
    * 瀏覽器兼容性說明：
    * 一、IE、chrome、Opera和Safari都實現了mousewheel事件，Opera 9.5 以前的版本，wheelDelta值的正負號是顛倒的；當用戶向前滾動鼠標滾輪時，wheelDelta時120的倍數，向後滾動則是-120的倍數
    * 二、fireFox支持的是一個名爲DOMMouseScroll的相似事件，當用戶向前滾動鼠標滾輪時，wheelDelta時3的倍數，向後滾動則是-3的倍數
    */
    getWheelDelta: function(event){
        var evt = this.getEvent(event);
        if(evt.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -evt.wheelDelta : evt.wheelDelta);
        } else {
            return  -evt.detail * 40;
        }
    }
    
}