添加事件的兼容性寫法
阿新 • • 發佈：2018-06-28
listener === afa 觸發事件 html ppr this 情況下 監聽
通常，我們為某個控件元素添加事件時，用的是：
1 ele.onclick=fn1(){}; 2 或者 3 ele.onclick=fn1; //此時不需要加括號，調用的是整個方法而不是return的結果 4 function fun1(){}
這種綁定事件的方法簡單高效，但對同一個控件的同一個動作進行綁定時，前面的事件容易被重疊。故需要對控件的事件進行監聽。
監聽的方法有兩種，分別為addEventListener和attachEvent。
- 首先addEventListener進行了解
ele.addEventListener(type,listener,useCapture
| 參數 | 參數說明 |
| ele | 需要綁定的控件或是html結點 |
| type | 觸發事件名稱。註意：需要去掉‘on’,為‘click’或者‘mouseover’等 |
| listener | 事件的監聽函數，即要執行的方法。註意：在此，函數名不需要加()。因為不調用的是整個函數，而不是返回的結果。 |
| useCapture |
事件監聽方式，只能是true和false。 true，采用capture(捕獲模式:從外向內)； false，采用bubbling(冒泡模式：從內向外)。 如無特殊要求，一般是false。 |
是W3C所支持的事件綁定方法，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數
1 //ele.addEventListener(type,listener,useCapture); 2 btn1.addEventListener("click",fn1,false); 3 btn1.addEventListener("click",fn2,false); 4 btn1.addEventListener("click",fn3,false);
執行的順序是fn1-fn2-fn3
- attechEvent的了解
ele.attechEvent(type,function);
| 參數 | 參數說明 |
| type | 觸發事件名稱。註意：不能去掉‘on’,為‘onclick’或者‘onmouseover’等 |
| function | 事件的監聽函數，即要執行的方法。同樣的不帶()。 |
IE8.0及其以下版本（互補版本）
1 //ele.attachEvent(type,function); 2 btn1.attachEvent("onclick",fn1); 3 btn1.attachEvent("onclick",fn2); 4 btn1.attachEvent("onclick",fn3);
執行順序fn3-fn2-fn1
- 所以，采取這種事件的綁定及解綁的方法必須要采取兼容性的寫法：
- 封裝：（利用對象.屬性方法調用）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button>賦詩</button> 9 10 11 <script> 12 13 var btn = document.getElementsByTagName("button")[0]; 14 15 EventListen = { 16 addEvent: function (ele,fn,str) { 17 //通過判斷調用的方式兼容IE678 18 //判斷瀏覽器是否支持該方法，如果支持那麽調用，如果不支持換其他方法 19 if(ele.addEventListener){ 20 //直接調用 21 //火狐谷歌IE9+支持addEventListener 22 ele.addEventListener(str,fn); 23 }else if(ele.attachEvent){ 24 //IE678支持attachEvent 25 ele.attachEvent("on"+str,fn); 26 }else{ 27 //在addEventListener和attachEvent都不存在的情況下，用此代碼 28 ele["on"+str] = fn; 29 } 30 }, 31 removeEvent: function (ele,fn,str) { 32 if(ele.removeEventListener){ 33 ele.removeEventListener(str,fn); 34 }else if(ele.detachEvent){ 35 ele.detachEvent("on"+str,fn); 36 }else{ 37 ele["on"+str] = null; 38 } 39 } 40 }; 41 42 // btn.addEventListener("click",fn); 43 EventListen.addEvent(btn,fn,"click"); 44 45 EventListen.removeEvent(btn,fn,"click"); 46 47 function fn(){ //定義fn函數 48 alert(1); 49 } 50 51 </script> 52 </body> 53 </html>
以下內容為轉載內容
- 轉載版第一個
1 function addEvent(ele, type, fn, useCapture) { 2 if (ele.addEventListener) { 3 ele.addEventListener(type, fn, useCapture);//DOM2.0 4 return true; 5 } 6 else if (ele.attachEvent) { 7 var r = ele.attachEvent(‘on‘ + type, fn);//IE5+ 8 return r; 9 } 10 else { 11 ele[‘on‘ + type] = fn;//DOM 0 12 } 13 }
- 下面是Dean Edwards 的版本
1 function addEvent(element, type, handler) { 2 //為每一個事件處理函數分派一個唯一的ID 3 if (!handler.$$guid) 4 handler.$$guid = addEvent.guid++; 5 6 //為元素的事件類型創建一個哈希表 7 if (!element.events) 8 element.events = {}; 9 10 //為每一個"元素/事件"對創建一個事件處理程序的哈希表 11 var handlers = element.events[type]; 12 if (!handlers) { 13 handlers = element.events[type] = {}; 14 //存儲存在的事件處理函數(如果有) 15 if (element["on" + type]) { 16 handlers[0] = element["on" + type]; 17 } 18 } 19 20 //將事件處理函數存入哈希表 21 handlers[handler.$$guid] = handler; 22 23 //指派一個全局的事件處理函數來做所有的工作 24 element["on" + type] = handleEvent; 25 }; 26 27 //用來創建唯一的ID的計數器 28 addEvent.guid = 1; 29 function removeEvent(element, type, handler) { 30 //從哈希表中刪除事件處理函數 31 if (element.events && element.events[type]) { 32 delete element.events[type][handler.$$guid]; 33 } 34 }; 35 function handleEvent(event) { 36 var returnValue = true; 37 //抓獲事件對象(IE使用全局事件對象) 38 event = event || fixEvent(window.event); 39 //取得事件處理函數的哈希表的引用 40 var handlers = this.events[event.type]; 41 //執行每一個處理函數 42 for (var i in handlers) { 43 this.$$handleEvent = handlers[i]; 44 if (this.$$handleEvent(event) === false) { 45 returnValue = false; 46 } 47 } 48 return returnValue; 49 }; 50 51 //為IE的事件對象添加一些“缺失的”函數 52 function fixEvent(event) { 53 //添加標準的W3C方法 54 event.preventDefault = fixEvent.preventDefault; 55 event.stopPropagation = fixEvent.stopPropagation; 56 return event; 57 }; 58 fixEvent.preventDefault = function() { 59 this.returnValue = false; 60 }; 61 fixEvent.stopPropagation = function() { 62 this.cancelBubble = true; 63 };
功能非常強悍，解決IE的this指向問題，event總是作為第一個參數傳入，跨瀏覽器就更不在話下。
3.最後一個HTML5的版本：
1 var addEvent=(function(){ 2 if(document.addEventListener){ 3 return function(el,type,fn){ 4 if(el.length){ 5 for(var i=0;i<el.length;i++){ 6 addEvent(el[i],type,fn); 7 } 8 }else{ 9 el.addEventListener(type,fn,false); 10 } 11 }; 12 }else{ 13 return function(el,type,fn){ 14 if(el.length){ 15 for(var i=0;i<el.length;i++){ 16 addEvent(el[i],type,fn); 17 } 18 }else{ 19 el.attachEvent(‘on‘+type,function(){return fn.call(el,window.event);}); 20 } 21 }; 22 } 23 })();
添加事件的兼容性寫法