DOM0、DOM2、DOM3事件處理方式的區別是什麼？

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

DOM0、DOM2和DOM3級事件處理方式的主要區別在於它們如何將事件處理程式附加到HTML元素以及它們支援的事件型別。

DOM0級事件處理:

  • 方式: 直接將事件處理程式賦值給HTML元素的屬性。例如：element.onclick = function() { ... }; 或者在HTML中直接寫 onclick="..."。
  • 特點:
    • 簡單易用，相容性最好。
    • 每個事件型別只允許一個處理程式。新的處理程式會覆蓋舊的。
    • 無法進行事件捕獲。只支援事件冒泡。

DOM2級事件處理:

  • 方式: 使用 addEventListener() 和 removeEventListener() 方法來新增和刪除事件處理程式。例如：element.addEventListener('click', function() { ... }, false);
  • 特點:
    • 可以為同一元素的同一事件型別新增多個處理程式。它們會按照新增的順序依次執行。
    • 支援事件捕獲和冒泡。第三個引數 useCapture 控制事件處理程式是在捕獲階段還是冒泡階段執行。true 表示捕獲階段，false 表示冒泡階段（預設）。
    • 更好的控制和靈活性。

DOM3級事件處理:

  • 方式: 在DOM2級事件處理的基礎上，DOM3級引入了更多事件型別和事件模型。
  • 特點:
    • 定義了更多的事件型別，例如滑鼠滾輪事件、鍵盤事件、文字事件等。
    • 引入了新的事件模型，例如 KeyboardEvent、MouseEvent、TouchEvent 等，提供了更豐富的事件資訊。

總結表格:

特性 DOM0 DOM2 DOM3
新增方式 直接賦值給元素屬性 addEventListener() addEventListener()
刪除方式 直接賦值為 null removeEventListener() removeEventListener()
多個處理程式 不支援，後新增的會覆蓋之前的 支援 支援
事件捕獲 不支援 支援 支援
事件冒泡 支援 支援 支援
事件型別 較少 較多 更多，更細化
相容性 最好 良好 良好

示例:

const element = document.getElementById('myElement');

// DOM0
element.onclick = function() {
  console.log('DOM0 click');
};

// DOM2
element.addEventListener('click', function() {
  console.log('DOM2 click 1');
}, false);

element.addEventListener('click', function() {
  console.log('DOM2 click 2');
}, false);

// DOM3 (Example using MouseEvent)
element.addEventListener('click', function(event) {
  console.log('DOM3 click, clientX:', event.clientX);
}, false);

在這個例子中，點選 myElement 元素會依次輸出 "DOM0 click"、"DOM2 click 1"、"DOM2 click 2" 和 "DOM3 click, clientX: ..."，展示了不同級別事件處理程式的執行順序以及 DOM3 級事件如何提供更詳細的事件資訊 (例如 clientX)。

希望這個解釋能夠幫助你理解DOM0、DOM2和DOM3級事件處理方式的區別。

相關文章