在網頁開發中，要讓元素對使用者的動作（如點擊）做出反應，就是實現互動性的核心。而處理事件最常見的兩種方法是 HTML 元素的 onclick 屬性和 JavaScript 的 addEventListener 方法。
一、HTML onclick 屬性與 DOM 元素的屬性賦值
onclick 屬於事件處理的傳統寫法，它有兩種實現方式：
1. 直接在 HTML 標籤中嵌入 JavaScript 程式碼或函式呼叫（最舊的寫法，造成 HTML 與 JS 混雜，不利於分離）。
程式碼<body><button onclick="console.log('你點擊了我！')">點擊我</button><button onclick="handler3()">點擊我</button></body><script>function handler3(){console.log("3");}</script>
2. 透過 DOM 元素的屬性賦值程式碼<body>
<button id="myButton_legacy">點擊我</button><script>const btnLegacy = document.getElementById('myButton_legacy');// 第一次賦值btnLegacy.onclick=handler4;// 第二次賦值，會覆蓋掉 handler4，最終只有 handler5 會被執行btnLegacy.onclick=handler5;// 點擊按鈕時，只能看到 "5"function handler4(){console.log("4");}function handler5(){console.log("5");}</script></body>
這兩種方式的核心限制都是：一個事件類型只能綁定一個處理函式。
二、JavaScript addEventListener 方法
這是現代、標準化的事件處理方式，透過 JavaScript 將事件處理函式附加到 DOM 元素上。
它的最大優點是：可以為同一個元素、同一個事件類型綁定多個事件處理器，並且它們會依序執行，而不會相互干擾或覆蓋。它提供了更多進階選項（如事件捕獲階段的處理）。
程式碼
<body>
<button id="myButton">點擊我</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener('click', handler1);
btn.addEventListener('click', handler2);
// 點擊按鈕時，handler1 與 handler2 都會執行
function handler1(){
console.log("1");
}
function handler2(){
console.log("2");
}
</script>
</body>
結論與現代開發建議
在現代網頁開發中，addEventListener 幾乎是必備的事件處理方法。它代表了更清晰、更強大的事件處理模型。
因此，除非您使用 onclick 進行快速的程式碼實驗、示範極簡範例、單純只需要處理單一事件的情況，或為了相容於必須支援的極舊瀏覽器專案（通常不常見），否則建議優先且全面使用 addEventListener，以確保：
- 更清晰的程式碼結構（HTML 結構與 JS 行為分離）。
- 更強大的靈活性（可同時綁定多個事件，利於函式庫或模組化開發）。
- 更好的可維護性（便於追蹤和（使用 removeEventListener 方法）移除特定的事件處理器）。
沒有留言:
張貼留言