<! DOCTYPE html>
<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+= "\ Relatetarget is" +oevent.relatedtarget.tagname;
}
}
</script>
<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= "cols=" ></textarea></p>
</body>
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
