Javascript Event事件中IE與標準DOM的比較

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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();
}
}

附一個代碼測試視窗：(感覺有些時候這種方式比alert()還好用) xmlns="http://www.w3.org/1999/xhtml">

Mouse Here

Clear

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More