Comparison of IE and standard DOM in Javascript Event_javascript skills

1. The difference between event streams

IE uses bubbling events Netscape uses capturing events DOM uses capturing first and then bubbling events
Example:

Copy code The code is as follows:

Click Here

Bubble event model: button->div->body ( IE event flow)

Capture event model: body->div->button (Netscape event flow)

DOM event model: body->div->button-> ;button->div->body (capture first and then bubble)

2. The difference between event listening functions

IE use:
[ Object].attachEvent("name_of_event_handler", fnHandler); //Binding function
[Object].detachEvent("name_of_event_handler", fnHandler); //Remove binding

DOM usage:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //Binding function
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //Remove binding
bCapture parameter is used to set the stage of event binding, true is the capture stage, false is the bubbling stage.

Sample code:

Copy code The code is 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 (acquisition)
IE: The event object is an attribute event of the window object. The event can only be accessed when the event occurs. After the event processing function is executed, the event object is destroyed.

Example:

Copy code The code is as follows:

document.onclick= function(){
alert(window.event.type);
}

DOM: The event object must be passed to the event handler as the only parameter and must be the first one parameter.

Example:

Copy code The code is as follows:

document.onclick= function(){
alert(arguments[0].type);
}

4. Get the target (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 The code is as follows:

//Block the right-click menu of the web page
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}

6. Stop event copying (Bubble) IE: oEvent.cancelBubble=true;
DOM: oEvent.stopPropagation();

Example:

Copy code The code is as follows:

button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}


Attached is a code test window: (I feel that sometimes this method is better than alert())

<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 testing</title> <div style="width:100px; height:60px; background-color:#333333; color:#FFFFFF; padding:5px;" onmouseover="handleEvent(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="15" cols="50"><a href="javascript:clear()">Clear</a>