JavaScript高级程序设计阅读笔记（十八） js跨平台的事件

跨平台的事件EventUtil对象　　EventUtil: 复制代码代码如下: var EventUtil={ addEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler); } else{ oTarget["on"+sEventType]=fnHandler; } }, removeEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.removeEventListener){ oTarget.removeEventListener(sEventType,fnHandler); } else if(oTarget.detachEvent){ oTarget.detachEvent("on"+sEventType,fnHandler); } else{ oTarget["on"+sEventType]=null; } }, formatEvent:function(oEvent){ var isIE=/msie/i.test(navigator.userAgent), isWin=/win/i.test(navigator.userAgent); if(isIE && isWin){ oEvent.charCode=(oEvent.type == "keypress")?oEvent.keyCode:0; oEvent.eventPhase =2; oEvent.isChar=(oEvent.charCode>0); oEvent.pageX=oEvent.clientX+document.body.scrollLeft; oEvent.pageY=oEvent.clientY+document.body.scrollTop; oEvent.preventDefault=function(){ this.returnvalue=false; } if(oEvent.type == "mouseout"){ oEvent.relateTarget=oEvent.toElement; }else if(oEvent.type=="mouseover"){ oEvent.relatedTarget=oEvent.fromElement; } oEvent.stopPropagation=function(){ this.cancelBubble=true; } oEvent.target=oEvent.srcElement; oEvent.time=(new Date()).getTime(); } return oEvent; }, getEvent:function(){ if(window.event){ return this.formatEvent(window.event); }else{ return EventUtil.getEvent.caller.arguments[0]; } } } 测试复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset="utf-8"/> <script> var EventUtil={ addEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } else if(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,fnHandler); } else{ oTarget["on"+sEventType]=fnHandler; } }, removeEventHandler:function(oTarget, sEventType, fnHandler){ if(oTarget.removeEventListener){ oTarget.removeEventListener(sEventType,fnHandler); } else if(oTarget.detachEvent){ oTarget.detachEvent("on"+sEventType,fnHandler); } else{ oTarget["on"+sEventType]=null; } }, formatEvent:function(oEvent){ var isIE=/msie/i.test(navigator.userAgent), isWin=/win/i.test(navigator.userAgent); if(isIE && isWin){ oEvent.charCode=(oEvent.type == "keypress")?oEvent.keyCode:0; oEvent.eventPhase =2; oEvent.isChar=(oEvent.charCode>0); oEvent.pageX=oEvent.clientX+document.body.scrollLeft; oEvent.pageY=oEvent.clientY+document.body.scrollTop; oEvent.preventDefault=function(){ this.returnvalue=false; } if(oEvent.type == "mouseout"){ oEvent.relateTarget=oEvent.toElement; }else if(oEvent.type=="mouseover"){ oEvent.relatedTarget=oEvent.fromElement; } oEvent.stopPropagation=function(){ this.cancelBubble=true; } oEvent.target=oEvent.srcElement; oEvent.time=(new Date()).getTime(); } return oEvent; }, getEvent:function(){ if(window.event){ return this.formatEvent(window.event); }else{ return EventUtil.getEvent.caller.arguments[0]; } } } EventUtil.addEventHandler(window,"load",function(){ var oDiv=document.getElementById("div1"); EventUtil.addEventHandler(oDiv,"mouseover",handleEvent); EventUtil.addEventHandler(oDiv,"mouseout",handleEvent); EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); EventUtil.addEventHandler(oDiv,"mouseup",handleEvent); EventUtil.addEventHandler(oDiv,"click",handleEvent); EventUtil.addEventHandler(oDiv,"dblclick",handleEvent); }); function handleEvent(){ var oEvent=EventUtil.getEvent(); var oTextbox=document.getElementById("txt1"); oTextbox.value+="n>"+oEvent.type; oTextbox.value+="n target is "+oEvent.target.tagName; if(oEvent.relatedTarget){ oTextbox.value+="n relateTarget is "+oEvent.relatedTarget.tagName; } } </script> </head> <body> <p>Use your mouse to click and double click the red square.</p> <div id="div1" style="width:100px;height:100px;background:red;">Test</div> <p><textarea id="txt1" rows="15" cols="50"></textarea></p> </body> </html> // 0); oEvent.pageX=oEvent.clientX+document.body.scrollLeft; oEvent.pageY=oEvent.clientY+document.body.scrollTop; oEvent.preventDefault=function(){ this.returnvalue=false; } if(oEvent.type == "mouseout"){ oEvent.relateTarget=oEvent.toElement; }else if(oEvent.type=="mouseover"){ oEvent.relatedTarget=oEvent.fromElement; } oEvent.stopPropagation=function(){ this.cancelBubble=true; } oEvent.target=oEvent.srcElement; oEvent.time=(new Date()).getTime(); } return oEvent; }, getEvent:function(){ if(window.event){ return this.formatEvent(window.event); }else{ return EventUtil.getEvent.caller.arguments[0]; } } } window.onload=function(){ var oDiv=document.getElementById("div1"); EventUtil.addEventHandler(oDiv,"mouseover",handleEvent); EventUtil.addEventHandler(oDiv,"mouseout",handleEvent); EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); EventUtil.addEventHandler(oDiv,"mouseup",handleEvent); EventUtil.addEventHandler(oDiv,"click",handleEvent); EventUtil.addEventHandler(oDiv,"dblclick",handleEvent); } function handleEvent(){ var oEvent=EventUtil.getEvent(); var oTextbox=document.getElementById("txt1"); oTextbox.innerHTML+=" >"+oEvent.type; oTextbox.innerHTML+=" target is "+oEvent.target.tagName; if(oEvent.relatedTarget){ oTextbox.innerHTML+=" relateTarget is "+oEvent.relatedTarget.tagName; } } // ]]> Use your mouse to click and double click the red square. Test 作者：Artwl 出处：http://artwl.cnblogs.com

　　推荐阅读

　　jquery 插件学习（二）

创建全局函数只需通过为jquery对象添加属性即可，而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现，实际上jquery.fn对象就是jquery.prototype原型对象的别名，使用别名更方便引用。 demo：复制代码代>>>详细阅读

本文标题：JavaScript高级程序设计阅读笔记（十八） js跨平台的事件

地址：http://www.17bianji.com/kaifa2/JS/23186.html

1/2 1

JavaScript高级程序设计 阅读笔记（十八） js跨平台的事件

JavaScript高级程序设计阅读笔记（十八） js跨平台的事件