# 3. 綁定事件的語法差異 - 為什麼要懂監聽事件？

- 透過範例即可明白道理：

    <!-- 測試兩種事件模式之差異性 -->
    <input type="button" value="on點擊模式" class="onBtn">
    <input type="button" value="add點擊模式" class="addBtn">

- 如上，我們有兩顆 button，一顆來測試 onclick、一顆則是測試 addEventListenr 的 click 會有什麼差異性 gogo ~

---

### 測試 onclick:

// el1 - 使用傳統的 onclick + function 事件

var el1 = document.querySelector('.onBtn');

el1.onclick = function () {
    console.log('回傳訊息：1');
}

el1.onclick = function () {
    console.log('回傳訊息：2');
}

- 我們預期透過點擊 on按鈕會希望得到兩次的回傳，實際上只會 show 訊息2，也就是傳統 onclick 設計上的局限性，新的代碼會覆蓋掉舊的代碼，也就是onclick並不會跑出兩段功能。

### 測試監聽 add click:

var el2 = document.querySelector('.addBtn');
el2.addEventListener('click', function () {
    console.log('成功回傳-1');
}, false)


el2.addEventListener('click', function () {
    console.log('成功回傳-2');
}, false)


// 回傳結果：

成功回傳-1
成功回傳-2

### 由此可以得知，透過監聽事件的方式來執行事件，它是可以一次執行多個事件的，相當方便呢

###### tags: `JavaScript - event 事件`