javascript 格式化event对象


对付IE和DOM中的event对象之间区别的最佳手段是,调整它们室之尽可能地表现相似。因为更多的浏览器使用的是DOM事件模型,所以将IE的事件模型调整为接近于DOM事件模型就可以了。


DOM属性/方法IE属性/方法
altKeyaltKey
bubbles
buttonbutton
cancelBubblecancelBubble
charCodekeyCode
clientXclientX
clientYclientY
ctrlKeyctrlKey
currentTarget
detail
eventPhase
isChar
keyCodekeyCode
metaKey
pageX
pageY
preventDefault()returnValue = false;
relatedTargetfromElement   toElement
screenXscreenX
screenYscreenY
shiftKeyshiftKey
stopProgation()cancelBubble = true
targetsrcElement
timeStamp
typetype

格式代码:
  1. var EventUtil = new Object;
  2. EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
  3.     if (oTarget.addEventListener) {
  4.         oTarget.addEventListener(sEventType, fnHandler, false);
  5.     } else if (oTarget.attachEvent) {
  6.         oTarget.attachEvent("on" + sEventType, fnHandler);
  7.     } else {
  8.         oTarget["on" + sEventType] = fnHandler;
  9.     }
  10. };
  11.         
  12. EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
  13.     if (oTarget.removeEventListener) {
  14.         oTarget.removeEventListener(sEventType, fnHandler, false);
  15.     } else if (oTarget.detachEvent) {
  16.         oTarget.detachEvent("on" + sEventType, fnHandler);
  17.     } else { 
  18.         oTarget["on" + sEventType] = null;
  19.     }
  20. };
  21. EventUtil.formatEvent = function (oEvent) {
  22.     if (isIE && isWin) {
  23.         oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
  24.         oEvent.eventPhase = 2;
  25.         oEvent.isChar = (oEvent.charCode > 0);
  26.         oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
  27.         oEvent.pageY = oEvent.clientY + document.body.scrollTop;
  28.         oEvent.preventDefault = function () {
  29.             this.returnValue = false;
  30.         };
  31.         if (oEvent.type == "mouseout") {
  32.             oEvent.relatedTarget = oEvent.toElement;
  33.         } else if (oEvent.type == "mouseover") {
  34.             oEvent.relatedTarget = oEvent.fromElement;
  35.         }
  36.         oEvent.stopPropagation = function () {
  37.             this.cancelBubble = true;
  38.         };
  39.         oEvent.target = oEvent.srcElement;
  40.         oEvent.time = (new Date).getTime();
  41.     }
  42.     return oEvent;
  43. };
  44. EventUtil.getEvent = function() {
  45.     if (window.event) {
  46.         return this.formatEvent(window.event);
  47.     } else {
  48.         return EventUtil.getEvent.caller.arguments[0];
  49.     }
  50. };
示例:
  1. <html>
  2.     <head>
  3.         <title>Mouse Events Example</title>
  4.         <script type="text/javascript" src="detect.js"></script>
  5.         <script type="text/javascript" src="eventutil.js"></script>
  6.         <script type="text/javascript">
  7.         
  8.             EventUtil.addEventHandler(window, "load", function () {
  9.                 var oDiv = document.getElementById("div1");
  10.                 
  11.                 EventUtil.addEventHandler(oDiv, "mouseover", handleEvent);
  12.                 EventUtil.addEventHandler(oDiv, "mouseout", handleEvent);
  13.                 EventUtil.addEventHandler(oDiv, "mousedown", handleEvent);
  14.                 EventUtil.addEventHandler(oDiv, "mouseup", handleEvent);
  15.                 EventUtil.addEventHandler(oDiv, "click", handleEvent);
  16.                 EventUtil.addEventHandler(oDiv, "dblclick", handleEvent);                
  17.                 
  18.             });
  19.             
  20.             function handleEvent() {
  21.                 var oEvent = EventUtil.getEvent();
  22.                 
  23.                 var oTextbox = document.getElementById("txt1");
  24.                 oTextbox.value += "/n>" + oEvent.type;
  25.                 oTextbox.value += "/n    target is " + oEvent.target.tagName;
  26.                 if (oEvent.relatedTarget) {
  27.                     oTextbox.value += "/n    relatedTarget is " + oEvent.relatedTarget.tagName;
  28.                 }
  29.             }
  30.    
  31.         </script>
  32.     </head>
  33.     <body>
  34.         <p>Use your mouse to click and double click the red square.</p>
  35.         <div style="width: 100px; height: 100px; background-color: red" id="div1"></div>
  36.         <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
  37.     </body>
  38. </html>
此例子可在所有的DOM兼容的浏览器中运行,也可以在IE兼容的浏览器中运行,使用了格式化过的event对象中的target和relatedtarget属性。

注:detect.js为浏览器、操作系统检测脚本 (见  javascript 检测浏览器类型、操作系统平台的代码
    eventutil.js为上面的格式代码。








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章