1. The difference between event streams
IE uses a bubbling event Netscape uses the capture event DOM to use the first-captured bubble-type event
Example:
Copy Code code as follows:
<body>
<div>
<button> Click here </button>
</div>
</body>
Bubble Type Event Model: Button->div->body (ie event flow)
Capture Event Model: Body->div->button (Netscape Event Stream)
DOM Event Model: Body->div->button->button->div->body (first capture, then bubbling)
2. The difference between event listening functions
IE use:
[Object].attachevent ("Name_of_event_handler", Fnhandler); Binding functions
[Object].detachevent ("Name_of_event_handler", Fnhandler); removing bindings
DOM uses:
[Object].addeventlistener ("Name_of_event", Fnhandler, Bcapture); Binding functions
[Object].removeeventlistener ("Name_of_event", Fnhandler, Bcapture); removing bindings
The Bcapture parameter is used to set the phase of the event binding, true to the capture phase, and false to the bubbling phase.
Sample code:
Copy Code code as follows:
function addEventHandler (Object,eventtype,fnhandler) {
if (Object.addeventlistener) {//dom
Object.addeventlistener (EventType, Fnhandler, false);
}else if (object.attachevent) {//ie
Object.attachevent ("On" +eventtype, Fnhandler);
}else{//others
object["on" +eventtype]=fnhandler;
}
}
function removeEventHandler (Object,eventtype,fnhandler) {
if (Object.removeeventlistener) {//dom
Object.removeeventlistener (EventType, Fnhandler, false);
}else if (object.detachevent) {//ie
Object.detachevent ("On" +eventtype, Fnhandler);
}else{//others
object["on" +eventtype]=null;
}
}
addEventHandler (Odiv, "click", Function () {alert ("clicked")});
3. Event object Positioning (GET)
IE: An Event object is a property of a Window object event,event can only be accessed when an event occurs, the event handler completes, and the event object is destroyed.
Example:
Copy Code code as follows:
Document.onclick=function () {
alert (Window.event.type);
}
The Dom:event object must be passed as a unique parameter to the event handler and must be the first argument.
Example:
Copy Code code as follows:
Document.onclick=function () {
alert (Arguments[0].type);
}
4. Get Goal (target)
Ie:var otarget=oevent.srcelement;
Dom:var Otarget=oevent.target;
5. Block event default behavior
Ie:oevent.returnvalue=false;
DOM:oEvent.preventDefault ();
Example:
Copy Code code as follows:
Screen page right button menu
Document.body.oncontextmenu=function (oevent) {
if (document.all) {
Oevent=window.event;
Oevent.returnvalue=false;
}else{
Oevent.preventdefault ();
}
}
6. Stop event Replication (bubbling)
Ie:oevent.cancelbubble=true;
DOM:oEvent.stopPropagation ();
Example:
Copy Code code as follows:
Button.onclick=function (oevent) {
if (document.all) {
Oevent=window.event;
Oevent.cancelbubble=true;
}else{
Oevent.stoppropagation ();
}
}
With a Code Test window: (It feels like sometimes it works better than alert ())
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <style type= text/css" media= "screen" > div{margin:0px Auto; #txt1 {font-size:14px; padding:2px 5px;} p{margin:0px auto; width:400px;} </style> <title>javascript Event Test </title> </pead> <body> <div onmouseover= "Handleeven T (event) "onmouseout=" Handleevent (event) "onmousedown=" Handleevent (event) onmouseup= "Handleevent" (event) onclick= "Handleevent (event)" ondblclick= "Handleevent (event)" id= "Div1" >mouse here</div> <p><textarea id= " Txt1 "rows=" cols= "M" ></textarea>Clear</p> <script type= "Text/javascript" > function Handleevent (oevent) {var Otextbox=document.getelementbyid ("Txt1"); otextbox.value+= ">>>>" +oevent.tyPe+ "\ n"; otextbox.value+= "\n>>>>target is" + (oevent.target| | oevent.srcelement). ID; otextbox.value+= "\n>>>>at" ("+oevent.clientx+", "+oevent.clienty+") in the client "; otextbox.value+= "\n>>>>at" ("+oevent.screenx+", "+oevent.screeny+") on the screen; otextbox.value+= "\n>>>>button down is" +oevent.button; var arrykeys=[]; if (Oevent.shiftkey) {Arrykeys.push ("Shift"); } if (Oevent.ctrlkey) {Arrykeys.push ("Ctrl"); } if (Oevent.altkey) {Arrykeys.push ("Alt"); } if (arrykeys.length>0) {otextbox.value+= ">>>>keys down are" +arrykeys+ "\ n";} Otextbox.scrolltop=otextbox.scrollheight-otextbox.offsetheight; function Clear () {document.getElementById ("Txt1"). value= "";} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
