js事件处理程序跨浏览器解决方案

时间：2021-05-26

本文实例为大家分享了js事件处理程序跨浏览器解决方案，供大家参考，具体内容如下

<!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方式的规则是最后添加的最先触发 } 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; } }, 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; } } }, getCharCode : function(event){ if(typeof event.charCode == "number"){ return event.charCode; } else{ return event.keyCode; } }};

以上就是本文的全部内容，希望对大家解决js事件处理程序跨浏览器有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章