addEventListener和attachEvent介紹, 原生js和jquery的兼容性寫法

也許很多同仁一聽到事件監聽，第一想到的就是原生js的 addEventListener()事件，的確如此，當然如果只是適用於現代瀏覽器（IE9、10、11 | ff, chorme, safari, opera（非windows系統自帶，可安裝的Browsers） ）,你只需要了解這一個事件的正確拼寫和參數就OK啦。

但是小生僅今天要介紹的是 添加事件監聽的兼容性寫法，所以，如果同仁們無需做兼容的話，建議只是了解或略過 哈/....

 

首先，介紹一下，事件監聽的事件有兩個，對，你沒聽錯，是兩個：

First: element.addEventListener(event,function(e),useCapture) 

　　　適用范圍：　現代瀏覽器（IE9、10、11 | ff, chorme, safari, opera）

　　　參數介紹：

　　　　　event: 必須。字符串，指定事件名。(注： 不要是 on+'someEvent', just 'someEvent' is ok).

　　　　　function: 必須。指定要事件觸發時執行的函數。

　　　　　　　(注：function(e) e:事件對象會作為第一個參數傳入函數, 事件對象的類型取決於特定的事件,例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。)

　　　　　useCapture: 可選。布爾值，指定事件是否在捕獲或冒泡階段執行。

　　　　　　　(注：true:function(e) 在捕獲階段執行， false:function(e)在冒泡階段執行，（默認為 false ).　

Second: element.attachEvent(eType,function(e))

　　適用范圍：IE 6、7、8

　　參數介紹：

　　　　eType: 必須。字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

　　　　function：必須。定要事件觸發時執行的函數。

詳細了解 參考：http://www.jb51.net/article/18220.htm （本人覺得 參數介紹上 比較細）

 

由於以上兩個事件的適用范圍有所不同，所以催生了以下的兼容寫法(上代碼)：

1.原生 Javascript 寫法：

var EventUtil = {

    // 添加事件監聽
    add: function(element, type, callback){

        if(element.addEventListener){
            element.addEventListener(type, callback, false);
        } else if(element.attachEvent){
            element.attachEvent('on' + type, callback);
        } else {
            element['on' + type] = callback;
        }
    }
}

 

　　使用方式：

var at = document.getElementbyId('atemp');
EventUtil.add(at, 'click', function(){

    console.log('被點擊了');
});

 

　　擴展：

var EventUtil = {

    // 添加事件監聽
    add: function(element, type, callback){

        if(element.addEventListener){
            element.addEventListener(type, callback, false);
        } else if(element.attachEvent){
            element.attachEvent('on' + type, callback);
        } else {
            element['on' + type] = callback;
        }
    },

    // 移除事件監聽
    remove: function(element, type, callback){

        if(element.removeEventListener){
            element.removeEventListener(type, callback, false);
        } else if(element.detachEvent){
            element.detachEvent('on' + type, callback);
        } else {
            element['on' + type] = null;
        }

    },

    // 跨瀏覽器獲取 event 對象
    getEvent: function(event){

        return event ? event : window.event;
    },

    // 跨瀏覽器獲取 target 屬性
    getTarget: function(event){

        return event.target || event.srcElement;
    },

     阻止事件的默認行為
    preventDefault: function(event){

        if(event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    // 阻止事件流或使用 cancelBubble
    stopPropagation: function(){

        if(event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

 

2.jQuery $.fn.extend 寫法（此方法在js方法上進行的 改進，如下）

$.fn.extend({
            addEvent:function( type, handle, bool){
                var el, thisLen=this.length;
                bool?bool=bool:bool=false;
                if( thisLen == 1){
                    el = this[0];        //jquery對象轉成 js對象
                    el.addEventListener ? el.addEventListener(type, handle, bool ):
                            el.attachEvent('on'+type, handle);
                }else {
                    for( var i=0;i<thisLen;i++ ){
                        el = this[i];
                        el.addEventListener ? el.addEventListener(type, handle, bool ):
                                el.attachEvent('on'+type, handle);
                    }
                }
            }
        }

 

　　使用方式：

 $('p').addEvent('click',function(e){ 2 alert(‘哦，我被點啦。。。’); 3 }); 

　　

　　擴展：

　　　　同上擴展（不再描述）

 

ok,打完收工！！！