JavaScript 中 on 系列與 addEventListener 的差別：新手必讀指南

更新日期： 2025 年 3 月 9 日

在學習 JavaScript 事件處理時，你可能會遇到兩種常見的方式來為 DOM 元素添加事件處理函數：一種是使用 on 系列的屬性（如 onclick），另一種是使用 addEventListener。

這兩種方法都有其優缺點，並且在實際應用中會有不同的行為。

本篇文章將介紹這兩種方式的差異，並幫助你理解在不同情境下該如何選擇合適的事件處理方式。

什麼是 on 系列屬性？

on 系列屬性是最早用來處理 JavaScript 事件的方式，它直接將事件處理函數綁定到 DOM 元素上。

這些屬性都是以 on 開頭的，比如 onclick、onmouseover、onchange 等。

使用範例

<button id="myButton">點擊我</button>

<script>
  var button = document.getElementById('myButton');

  // 使用 onclick 屬性綁定事件
  button.onclick = function() {
    alert('你點擊了按鈕！');
  };
</script>

常見的 on 系列事件屬性

• onclick：點擊事件
• onmouseover：滑鼠移入事件
• onmouseout：滑鼠移出事件
• onchange：表單元素改變事件
• onkeydown：按下鍵盤按鍵事件

什麼是 addEventListener？

addEventListener 是一種較新的事件綁定方式，允許你為一個 DOM 元素綁定多個事件處理函數，並提供了更多的控制選項，如事件冒泡和捕獲機制的支持。

addEventListener 在現代網頁開發中更為常用，因為它比 on 系列屬性更靈活。

使用範例

<button id="myButton">點擊我</button>

<script>
  var button = document.getElementById('myButton');

  // 使用 addEventListener 綁定事件
  button.addEventListener('click', function() {
    alert('你點擊了按鈕！');
  });
</script>

on 系列屬性與 addEventListener 的區別

單一事件處理函數 VS 多個事件處理函數

• on 系列屬性：一個元素的某個事件只能綁定一個處理函數。
  
  如果你為同一個事件重複設置處理函數，那麼前面的處理函數將會被覆蓋。例如，如果你兩次為 onclick 設置處理函數，後者會覆蓋前者。

  var button = document.getElementById('myButton');

  // 設置第一次的處理函數
  button.onclick = function() {
    alert('第一次事件');
  };

  // 設置第二次的處理函數，將會覆蓋第一次
  button.onclick = function() {
    alert('第二次事件');
  };

在這個範例中，最終只會顯示「第二次事件」，因為第二個 onclick 覆蓋了第一個。

• addEventListener：可以為同一個元素的同一個事件綁定多個處理函數。
  
  這些處理函數會按照添加的順序依次執行，不會互相覆蓋。

  var button = document.getElementById('myButton');

  // 第一次綁定處理函數
  button.addEventListener('click', function() {
    alert('第一次事件');
  });

  // 第二次綁定處理函數，不會覆蓋第一次
  button.addEventListener('click', function() {
    alert('第二次事件');
  });

在這個範例中，當你點擊按鈕時，會先顯示「第一次事件」，然後再顯示「第二次事件」。

事件捕獲與冒泡

• on 系列屬性：無法控制事件是處於冒泡階段還是捕獲階段。
  
  所有通過 on 屬性綁定的事件都是在冒泡階段觸發的。
• addEventListener：可以選擇是要在事件冒泡階段還是捕獲階段觸發事件處理函數。
  
  通過傳遞第三個參數，你可以設置事件處理函數是在事件捕獲階段（true）還是冒泡階段（false）執行。

  var button = document.getElementById('myButton');

  // 在捕獲階段處理事件
  button.addEventListener('click', function() {
    alert('捕獲階段');
  }, true);

  // 在冒泡階段處理事件
  button.addEventListener('click', function() {
    alert('冒泡階段');
  }, false);

事件移除

• on 系列屬性：要移除事件處理函數，只需將對應的 on 屬性設置為 null 即可。

  var button = document.getElementById('myButton');

  button.onclick = function() {
    alert('事件觸發');
  };

  // 移除事件
  button.onclick = null;

• addEventListener：可以使用 removeEventListener 方法來移除事件處理函數。
  
  注意，你必須提供與 addEventListener 中相同的函數參考，否則無法移除該事件。

  var button = document.getElementById('myButton');

  function handleClick() {
    alert('事件觸發');
  }

  // 綁定事件
  button.addEventListener('click', handleClick);

  // 移除事件
  button.removeEventListener('click', handleClick);

瀏覽器支援

• on 系列屬性：所有瀏覽器都支援，包括非常老舊的瀏覽器。這使得它在某些需要兼容性極高的場景中仍然有效。
• addEventListener：支援現代瀏覽器，包括 IE9 及以上版本。在現代開發中，addEventListener 已經成為標準方式，因為它的功能更強大、靈活。

與 HTML 內嵌事件的對比

有時我們會在 HTML 中直接使用 on 事件來綁定處理函數，比如：

<button onclick="alert('你點擊了按鈕！')">點擊我</button>

這種做法雖然簡單，但不推薦，因為它將 JavaScript 與 HTML 直接混合，違反了關注點分離的原則。

使用 addEventListener 或 on 屬性能更好地保持 HTML 結構和 JavaScript 行為的分離，使代碼更具可維護性。

結論

總結來說，on 系列屬性是處理 JavaScript 事件的簡單方法，但功能較為有限；而 addEventListener 是一種更靈活且功能強大的方法，適合用於現代網頁開發。

當你需要為同一個事件添加多個處理函數，或需要控制事件的捕獲與冒泡階段時，addEventListener 無疑是最佳選擇。

無論你選擇使用哪種方式，了解它們之間的差異，並根據需求選擇合適的事件處理方式，將會讓你的 JavaScript 開發更加得心應手。

希望這篇文章能幫助你掌握這些事件處理的基本概念，讓你在開發互動性網頁時更加順暢！