W3C的事件處理和IE的事件處理有哪些區別?

王铁柱6發表於2024-12-03

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標準的事件處理模型。但在維護一些老舊專案時,仍然需要注意這些區別。

相關文章