| DOM屬性/方法 | IE屬性/方法 |
| altKey | altKey |
| bubbles | － |
| button | button |
| cancelBubble | cancelBubble |
| charCode | keyCode |
| clientX | clientX |
| clientY | clientY |
| ctrlKey | ctrlKey |
| currentTarget | － |
| detail | － |
| eventPhase | － |
| isChar | － |
| keyCode | keyCode |
| metaKey | － |
| pageX | － |
| pageY | － |
| preventDefault() | returnValue = false; |
| relatedTarget | fromElement toElement |
| screenX | screenX |
| screenY | screenY |
| shiftKey | shiftKey |
| stopProgation() | cancelBubble = true |
| target | srcElement |
| timeStamp | － |
| type | type |
格式代碼：
- var EventUtil = new Object;
- 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;
- }
- };
- EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
- if (oTarget.removeEventListener) {
- oTarget.removeEventListener(sEventType, fnHandler, false);
- } else if (oTarget.detachEvent) {
- oTarget.detachEvent("on" + sEventType, fnHandler);
- } else {
- oTarget["on" + sEventType] = null;
- }
- };
- EventUtil.formatEvent = function (oEvent) {
- 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.relatedTarget = 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;
- };
- EventUtil.getEvent = function() {
- if (window.event) {
- return this.formatEvent(window.event);
- } else {
- return EventUtil.getEvent.caller.arguments[0];
- }
- };
- <html>
- <head>
- <title>Mouse Events Example</title>
- <script type="text/javascript" src="detect.js"></script>
- <script type="text/javascript" src="eventutil.js"></script>
- <script type="text/javascript">
- 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 relatedTarget is " + oEvent.relatedTarget.tagName;
- }
- }
- </script>
- </head>
- <body>
- <p>Use your mouse to click and double click the red square.</p>
- <div style="width: 100px; height: 100px; background-color: red" id="div1"></div>
- <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
- </body>
- </html>
注：detect.js爲瀏覽器、操作系統檢測腳本 （見 javascript 檢測瀏覽器類型、操作系統平臺的代碼）
eventutil.js爲上面的格式代碼。