Cross-platform event EventUtil object
EventUtil:
Copy codeCode: 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.tar get = 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];
}
}
}
TestCopy codeThe Code is as follows: <! 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.tar get = 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" kerberoevent.tar get. 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.tar get = 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 "Your oevent.tar get. tagName;
If (oEvent. relatedTarget ){
OTextbox. innerHTML + ="
RelateTarget is "+ oEvent. relatedTarget. tagName;
}
}
//]>
Use your mouse to click and double click the red square.
Test
Author: Artwl
Source: http://artwl.cnblogs.com