DOM 事件級別
DOM Level 0
簡稱 DOM0，在 HTML 標籤內直接寫 Javascript。
html
<img
src="./images/logo.jpg"
width="300"
height="400"
alt="Logo"
onclick="alert('Hello Javascript!')"
>透過 HTML 定義了 id 屬性，選取網頁中 id 相符的 DOM，再將這個 DOM 綁定 onclick 事件，onclick 觸發這個事件處理函式。最後，利用事件處理賦值為 null 來解綁事件，也就是 document.getElementById('Pic').onclick = null。
html
<body>
<img src="./images/logo.jpg" id="Pic" width="300" height="400" alt="Logo">
<script>
document.getElementById('Pic').onclick = function () {
alert('Hello Javascript');
};
</script>
</body>注意
- HTML 和 Javascript 的依賴性太強。
- 容易被駭客植入惡意程式碼。
- 一個事件只能綁定一個函式。如果用此方法在同一個事件上綁定兩個不同函式，會造成兩個函式都無法如預期般正確運作。
DOM Level 1
簡稱 DOM1，沒有定義事件相關內容，因此沒有 DOM1 事件模型。
DOM Level 2
簡稱 DOM2，DOM2 彌補了 DOM0 無法同時綁定多個處理函式。DOM2 定義了 addEventListener 和 removeEventListener 兩個方法，分別用來綁定與解綁事件。
html
<body>
<img src="./images/logo.jpg" id="Pic" width="300" height="400" alt="Logo">
<script>
document.getElementById('Pic').addEventListener('click', function(){
alert('Hello Javascript');
});
</script>
</body>方法中可使用三個參數，以下方程式碼為例:
js
element.addEventListener(eventType, eventHandler, useCapture)| 參數 | 狀態 | 型別 | 說明 |
|---|---|---|---|
| eventType | 必填 | string | 事件類型 |
| eventHandler | 必填 | function | 事件觸發時要執行的函式 |
| useCapture | 選填 | boolean | 指定採用事件冒泡或捕獲。 |
小提醒
useCapture: true 為捕獲，false 為冒泡，第三個參數沒填時，預設為 false。
DOM Level 3
簡稱 DOM3，以 DOM2 為基礎，增添了更多的事件類型。