Javascript Event事件中IE與標準DOM的比較
2024-05-06 14:10:19
供稿：網友
1.事件流的區別
IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件
示例：
代碼如下:
<body>
<div>
<button>點擊這里</button>
</div>
</body>
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數的區別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
bCapture參數用于設置事件綁定的階段，true為捕獲階段，false為冒泡階段。
示例代碼：
代碼如下:
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.事件對象定位(獲取)
IE：事件對象是window對象的一個屬性event，event只能在事件發生時訪問，事件處理函數執行完畢，事件對象被銷毀。
示例：
代碼如下:
document.onclick=function(){
alert(window.event.type);
}
DOM：event對象必須作為唯一的參數傳遞給事件處理函數，且必須為第一個參數。
示例：
代碼如下:
document.onclick=function(){
alert(arguments[0].type);
}
4.獲取目標(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
5.阻止事件默認行為
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();
示例：
代碼如下:
//屏蔽網頁右鍵菜單
document.body.oncontextmenu=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
6.停止事件復制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
示例：
代碼如下:
button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
