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为上面的格式代码。