也許不少同仁一聽到事件監聽,第一想到的就是原生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,打完收工!!!