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

也許不少同仁一聽到事件監聽,第一想到的就是原生js的 addEventListener()事件,的確如此,固然若是隻是適用於現代瀏覽器(IE九、十、11 | ff, chorme, safari, opera(非windows系統自帶,可安裝的Browsers) ),你只須要了解這一個事件的正確拼寫和參數就OK啦。jquery

可是小生僅今天要介紹的是 添加事件監聽的兼容性寫法,因此,若是同仁們無需作兼容的話,建議只是瞭解或略過 哈/....windows

 

首先,介紹一下,事件監聽的事件有兩個,對,你沒聽錯,是兩個:瀏覽器

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

   適用範圍: 現代瀏覽器(IE九、十、11 | ff, chorme, safari, opera)this

   參數介紹:spa

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

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

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

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

       (注:true:function(e) 在捕獲階段執行, false:function(e)在冒泡階段執行,(默認爲 false ). 

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

  適用範圍:IE 六、七、8

  參數介紹:

    eType: 必須。字符串,事件名稱,含「on」,好比「onclick」、「onmouseover」、「onkeydown」等。

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

詳細瞭解 參考:http://www.jb51.net/article/18220.htm (本人以爲 參數介紹上 比較細)

 

因爲以上兩個事件的適用範圍有所不一樣,因此催生了如下的兼容寫法(上代碼):

1.原生 Javascript 寫法:

 1 var EventUtil = {
 2 
 3     // 添加事件監聽
 4     add: function(element, type, callback){
 5 
 6         if(element.addEventListener){
 7             element.addEventListener(type, callback, false);
 8         } else if(element.attachEvent){
 9             element.attachEvent('on' + type, callback);
10         } else {
11             element['on' + type] = callback;
12         }
13     }
14 }

 

  使用方式:

1 var at = document.getElementbyId('atemp');
2 EventUtil.add(at, 'click', function(){
3 
4     console.log('被點擊了');
5 });

 

  擴展:

 1 var EventUtil = {
 2 
 3     // 添加事件監聽
 4     add: function(element, type, callback){
 5 
 6         if(element.addEventListener){
 7             element.addEventListener(type, callback, false);
 8         } else if(element.attachEvent){
 9             element.attachEvent('on' + type, callback);
10         } else {
11             element['on' + type] = callback;
12         }
13     },
14 
15     // 移除事件監聽
16     remove: function(element, type, callback){
17 
18         if(element.removeEventListener){
19             element.removeEventListener(type, callback, false);
20         } else if(element.detachEvent){
21             element.detachEvent('on' + type, callback);
22         } else {
23             element['on' + type] = null;
24         }
25 
26     },
27 
28     // 跨瀏覽器獲取 event 對象
29     getEvent: function(event){
30 
31         return event ? event : window.event;
32     },
33 
34     // 跨瀏覽器獲取 target 屬性
35     getTarget: function(event){
36 
37         return event.target || event.srcElement;
38     },
39 
40      阻止事件的默認行爲
41     preventDefault: function(event){
42 
43         if(event.preventDefault){
44             event.preventDefault();
45         } else {
46             event.returnValue = false;
47         }
48     },
49 
50     // 阻止事件流或使用 cancelBubble
51     stopPropagation: function(){
52 
53         if(event.stopPropagation){
54             event.stopPropagation();
55         } else {
56             event.cancelBubble = true;
57         }
58     }
59 
60 };

 

2.jQuery $.fn.extend 寫法(此方法在js方法上進行的 改進,以下)

 1 $.fn.extend({
 2             addEvent:function( type, handle, bool){
 3                 var el, thisLen=this.length;
 4                 bool?bool=bool:bool=false;
 5                 if( thisLen == 1){
 6                     el = this[0];        //jquery對象轉成 js對象
 7                     el.addEventListener ? el.addEventListener(type, handle, bool ):
 8                             el.attachEvent('on'+type, handle);
 9                 }else {
10                     for( var i=0;i<thisLen;i++ ){
11                         el = this[i];
12                         el.addEventListener ? el.addEventListener(type, handle, bool ):
13                                 el.attachEvent('on'+type, handle);
14                     }
15                 }
16             }
17         }

 

  使用方式:

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

  

  擴展:

    同上擴展(再也不描述)

 

ok,打完收工!!!

相關文章
相關標籤/搜索