javaScript跨瀏覽器事件處理程序

最近在閱讀javascript高級程序設計，事件這一塊仍是有不少東西要學的，就把一些思考和總結記錄下。
在事件處理，事件對象，阻止事件的傳播等方法或對象存在着瀏覽器兼容性問題，開發過程當中最好編寫成一個通用的事件處理工具。

(function(){
    var EU = {};
    //...
    //在這裏添加一些通用的事件處理方法
    //...
    window.EventUtil = EU;
})();

事件處理程序

事件的綁定主要爲IE8如下瀏覽器作兼容處理：

IE8如下只支持事件冒泡
IE事件處理使用attachEvent detachEvent

綁定事件

EU.addHandler = function(element,type,handler){
    //DOM2級事件處理，IE9也支持
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加'on'
        //IE9也能夠這樣綁定
        element.attachEvent('on' + type,handler);
    }
    //DOM0級事件處理步，事件流也是冒泡
    else{
        element['on' + type] = handler;
    }
};

取消綁定事件

和綁定事件的處理基本一致，有一個注意點：

傳入的handler必須與綁定事件時傳入的相同（指向同一個函數）

EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent('on' + type,handler);
    }
    else{
        //屬性置空就能夠
        element['on' + type] = null;
    }
};

事件對象

注意點：

IE下event是全局對象，經過window.event取得

EU.getEvent = function(event){
    return event || window.event;
}

事件的目標

注意點:

IE下經過attachEvent綁定事件，內部this並不是觸發事件的DOM,而是window;
經過目標對象來獲取DOM節點，IE下是srcElement屬性，等同於其餘瀏覽器的target屬性

EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻止默認事件

EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下處理
    else{
        event.returnValue = false; //默認爲true
    }
}

關於事件默認行爲

阻止事件傳播

EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下處理
    else{
        event.cancelBubble = true;//默認爲false，注意區分於returnValue
    }
}

注意點：

阻止的是DOM層級間的事件傳播

好比：對於一個DOM元素，同時綁定捕獲事件與冒泡事件，若是在捕獲階段使用stopPropagation,不會阻斷冒泡事件的執行；(事件捕獲早於事件冒泡)

Demo地址：http://jsfiddle.net/0sfck15b/

若是對子元素和父元素以冒泡形式都綁定'click'事件，在子元素的事件處理中使用stopPropagation阻止事件傳播,父元素綁定的click事件不會執行。
Demo地址：http://jsfiddle.net/av6yebsw/

上面的劃掉的地方理解有誤，更正下。上面的demo中事件的執行都發生了目標階段,事件對象event的eventPhase屬性用來表示事件處理髮生在事件流哪一個階段。
對應關係 1：捕獲階段,2: 處於目標,3: 冒泡階段
還有一點:

目標階段並不必定先發生捕獲階段所綁定的事件,先綁定先執行

demo演示： http://jsfiddle.net/h52xwkrh/
但不變的是對同一個DOM不管在捕獲階段仍是在冒泡階段使用ev.preventDefault()，都不會阻止另外一個事件執行

歡迎討論交流！若是文章對你有幫助，點下面的推薦鼓勵下唄(๑>؂<๑）