js事件處理程序跨瀏覽器解決方案
更新時間:2016年03月27日 09:57:40 投稿:lijiao
這篇文章主要為大家詳細(xì)介紹了js事件處理程序跨瀏覽器解決方案,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js事件處理程序跨瀏覽器解決方案,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input type="button" id="button1" value="按鈕" /> </div> <script type="text/javascript"> function show(){ alert("Hello world!"); } //聲明一個對象 var eventUtil={ //添加句柄 addHandler:function(element,type,handler){ //DOM2級事件處理判斷 if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){//IE事件處理判斷 element.attachEvent('on'+type,handler); }else{//DOM0級事件判斷 element['on'+type]=handler; } }, //刪除句柄 removeHandler:function(element,type,handler){ //DOM2級事件處理判斷 if(element.removeEventListener){ elememt.removeEventListener(type,handler,false); }else if(element.detachEvent){//IE事件處理判斷 element.detachEvent('on'+type,handler); }else{//DOM0級事件判斷 element['on'+type]=null; } } } eventUtil.addHandler(button3,'click',show); </script> </body> </html>
再為大家分享js原生事件處理跨瀏覽器的代碼:
//跨瀏覽器的事件處理器添加方式 var EventUtil = { addHandler : function(elem, type, handler){ if(elem.addEventListener){ elem.addEventListener(type, handler, false); } else if(elem.attachEvent){ elem.attachEvent("on" + type, handler);//添加多個同一類型的handler時,IE方式的規(guī)則是最后添加的最先觸發(fā) } else{ if(typeof elem["on" + type] === 'function'){ var oldHandler = elem["on" + type]; elem["on" + type] = function(){ oldHandler(); handler(); } } else{ elem["on" + type] = handler;//支持添加多個事件處理器 } } }, getEvent : function(event){ return event ? event : window.event; }, getTarget : function(event){ return event.target || event.srcElement; }, preventDefault : function(event){ if(event.preventDefault){ event.preventDefault(); } else{ event.returnValue = false; } }, removeHandler : function(elem, type, handler){ if(elem.removeEventListener){ elem.removeEventListener(type, handler, false); } else if(elem.detachEvent){ elem.detachEvent("on" + type, handler); } else{ elem["on" + type] = null;//不支持移除單一事件處理器,只能全部移除 } }, stopPropagation : function(event){ if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble = true; } }, getRelatedTarget : function(event){ if(event.relatedTarget){ return event.relatedTarget; } else if(event.toElement && event.type == "mouseout"){ return event.toElement; } else if(event.fromElement && event.type == "mouseover"){ return event.fromElement; } else{ return null; } }, /*IE8點擊左鍵和中鍵都是0;FF無法識別中鍵;Chrome正常*/ getButton : function(event){//返回0,1,2 - 左,中,右 if(document.implementation.hasFeature("MouseEvents", "2.0")){ return event.button; } else{ switch(event.button){ case 0:case 1:case 3:case 5:case 7: return 0; break; case 2:case 6: return 2; break; case 4: return 1; break; default: break; } } }, /*只能檢測keypress事件,返回值等于將要顯示的字符編碼*/ /*IE和Chrome只有能顯示的字符鍵才觸發(fā),F(xiàn)F其它鍵也能觸發(fā),返回值為0*/ getCharCode : function(event){ if(typeof event.charCode == "number"){ return event.charCode; } else{ return event.keyCode; } } };
以上就是本文的全部內(nèi)容,希望對大家解決js事件處理程序跨瀏覽器有所幫助。
相關(guān)文章
js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法示例小結(jié)
這篇文章主要介紹了js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組遍歷、排序、判斷、比較等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03JavaScript中forEach和map詳細(xì)講解
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對數(shù)組中的每個元素執(zhí)行一個函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2023-11-11iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單
這篇文章主要介紹了iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單 ,需要的朋友可以參考下2018-10-10javascript模板方法模式和職責(zé)鏈模式實例分析
這篇文章主要介紹了javascript模板方法模式和職責(zé)鏈模式,結(jié)合實例形式較為詳細(xì)的分析了模板方法模式和職責(zé)鏈模式基本原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2023-07-07詳解babel是如何將class語法糖轉(zhuǎn)換為es5的語法
這篇文章主要詳細(xì)介紹了babel是如何將class語法糖轉(zhuǎn)換為es5的語法,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02