觀念篇 - 各種事件綁定的差異

現在要講解的是：「綁定事件」的常見作法

作法一

我有一顆按鈕

html:

<input type="button" class="btn" value="點擊">

JS:

🎃 建立一個變數el，並用.querySelector來選取.btn

🎃 在el綁定一個「.onclick事件」

var el = document.querySelector('.btn');

el.onclick = function(){
    alert('juju');
}

點擊按鈕，就會跳出 alert

作法二（這是早期的作法，現在不推薦這樣做）

🎃 直接在「html 標籤內」綁定事件，並且直接在裡面寫 JS 程式碼

html:

<input onclick="alert('hello')" type="button" class="btn" value="點擊">

點擊按鈕，就會跳出 alert

「作法二」是很早期的作法，現在不推薦這樣做的原因是：

1️⃣ 原因一：有些時候，元件不需要「每次都執行“onclick”事件」，只需要執行onclick「一次即可」

❌ 直接在「html 標籤內」綁定事件，就會「每次都執行“onclick”事件」

✅ 寫在 JavaScript，就可以去控制「在特定情況，元素才會綁定“onclick”事件」

2️⃣ 原因二：直接在「html 標籤內」寫 JS 程式碼，很容易被駭客入侵，直接修改程式碼

作法三

🎃 使用.addEventListener （監聽）

✅ 這是目前較新、且較推薦的寫法（比onclick還要更好的做法）