javaScript跨瀏覽器事件處理程序

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

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

事件處理程序

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

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

綁定事件

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取得this

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

事件的目標

注意點:.net

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

關於事件默認行爲code

阻止事件傳播

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中事件的執行都發生了目標階段,事件對象eventeventPhase屬性用來表示事件處理髮生在事件流哪一個階段。
對應關係 1:捕獲階段,2: 處於目標,3: 冒泡階段
還有一點:

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

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

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

相關文章
相關標籤/搜索