ie和dom事件流的區別

時間 2019-11-12

標籤 dom 事件區別欄目 HTML 简体版

原文原文鏈接

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爲冒泡階段。

標準DOM：
[Object].addEventListener("事件名稱"，fnHandler，是否捕獲)
[Object].removeEventListener("事件名稱", fnHandler, 是否捕獲);
1.DOM使用先捕獲後冒泡型事件，true爲在捕獲階段處理，false爲在冒泡階段處理
2.事件名稱沒有on
3.this指向觸發該事件的對象函數

IE(低版本9如下)：
[Object].attachEvent("事件名稱"，fnHandler);
[Object].detachEvent("事件名稱", fnHandler);
1.IE採用冒泡型事件
2.事件名稱有on
3.this指向windowthis

區別
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題對象