W3C和IE(特指IE9之前的版本,IE9及之後版本已基本遵循W3C標準)的事件處理模型主要在以下幾個方面存在區別:
1. 事件繫結:
- W3C: 使用
addEventListener()
方法新增事件監聽器,可以為同一元素的同一事件型別繫結多個處理函式。addEventListener()
接受三個引數:事件型別(字串,例如 "click")、事件處理函式和一個布林值(用於捕獲階段,稍後解釋)。 - IE: 使用
attachEvent()
方法新增事件監聽器。attachEvent()
接受兩個引數:事件型別(字串,例如 "onclick",注意事件型別前要加 "on")和事件處理函式。IE8及更早版本不支援為同一元素的同一事件型別繫結多個處理函式,後繫結的會覆蓋先繫結的。
2. 事件物件:
- W3C: 事件物件作為引數傳遞給事件處理函式。可以透過
event
引數訪問事件的各種屬性,例如event.target
獲取觸發事件的目標元素。 - IE: 事件物件是一個全域性物件,可以透過
window.event
訪問。
3. 事件流:
- W3C: 定義了兩種事件流:捕獲階段和冒泡階段。
- 捕獲階段: 事件從文件根節點向下傳播到目標元素。
- 冒泡階段: 事件從目標元素向上傳播到文件根節點。
addEventListener()
的第三個引數用於指定事件處理函式是在捕獲階段還是冒泡階段執行。true
表示捕獲階段,false
表示冒泡階段(預設值)。
- IE: 只支援冒泡階段。
4. this指向:
- W3C: 在事件處理函式中,
this
指向觸發事件的目標元素。 - IE: 在事件處理函式中,
this
指向全域性物件window
。
5. 阻止事件傳播和預設行為:
- W3C:
event.stopPropagation()
阻止事件傳播。event.preventDefault()
阻止事件的預設行為。
- IE:
event.cancelBubble = true
阻止事件傳播。event.returnValue = false
阻止事件的預設行為。
總結:
特性 | W3C | IE |
---|---|---|
事件繫結 | addEventListener() |
attachEvent() |
事件型別 | "click" | "onclick" |
事件物件 | event 引數 |
window.event |
事件流 | 捕獲和冒泡 | 冒泡 |
this指向 | 目標元素 | window |
阻止傳播 | stopPropagation() |
cancelBubble = true |
阻止預設行為 | preventDefault() |
returnValue = false |
由於這些差異,為了編寫相容不同瀏覽器的程式碼,通常需要使用一些技巧或庫來處理事件。現在,由於IE的市場份額已經非常低,並且主流瀏覽器都支援W3C標準,開發者可以更專注於W3C標準的事件處理模型。但在維護一些老舊專案時,仍然需要注意這些區別。