事件 Event

事件(event) 是指在網頁上的動作或者發生的事情，可以是瀏覽器的行爲，例如頁面加載完成，也可以是用戶的行為，例如點選按鈕、頁籤等動作。當網頁需要對某事件發生做出相應的事情時，例如點選按鈕跳出視窗，就需要將事件綁定顯示視窗的 function。

綁定的方法

當我們需要在指定事件發生後做某些事時，需要「綁定事件」，白話一點來說就是讓程式知道發生這件事後要執行哪段程式碼或哪個函式 (function)。而將事件綁定的方法主要有三種，分別為在 HTML 中直接寫 JS、on-event 綁定、及事件監聽。

• HTML 屬性中寫事件
  是事件綁定最直接的方式，也就是直接在 HTML 元素中用 inline 方式將事件寫成一個屬性，並在屬性值中寫入 JavaScript 程式，例如 <input type="button" onclick="clickButton()">，在這個方法中所有的事件都以 on 開頭，例如滑鼠點擊事件 click 會寫成 onclick=""。

• on-event 綁定
  on-event 是使用 元素節點.on事件名 = 函式 的方式綁定要執行的 Function，這個方法的概念與上個方法相同，只是將 HTML 和 JavaScript 的語法分離，這樣比 inline 的寫法更好維護。on-event 的寫法有一個缺點，就是我們無法在同個 event 上綁定多個 Function，所以較不適合複雜的情境。

• event listener 事件監聽
  事件監聽 ( addEventListener ) 是將一個監聽器 (event listener) 綁定在元素上，因為不是使用屬性的方式一對一綁定，所以我們可以針對同個事件綁定多個監聽器。
  addEventListener() 有三個參數，分別是 事件、執行 function，最後則是 Boolean 值， 用來決定事件要在「捕獲」或「冒泡」時執行，預設為 false (冒泡)。

1. 在 HTML 屬性中寫事件

最簡單的方式，常見的有 onclick、onchange、onmouseover 等等，用法是直接將事件名稱寫加 on 在 HTML中，但不太適合功能複雜，或者同時會有多個事件的情境。

範例： 在點選按鈕時觸發 clickme()

<!-- click button 時執行 function clickme -->
<button onclick="clickme()">點選</button>

function clickme() {
    console.log('被點了');
}

2. 在 JS 中用 on-event 綁定

在 JS 中以 DOM.事件 的寫法將 Function 綁定到事件中，這個作法相對於上一種較好管理，但缺點是一個事件只能綁定一個函式。

範例：

<button onclick="clickme()" id="button">點選</button>

// 取得 DOM button
var button = document.getElementById('button');
// 當 button onclick 時執行匿名函式
button.onclick = function(e){
    console.log('我被點了');
};

3. 事件監聽

事件監聽的寫法為 DOM.addEventListener('事件', 要執行的函式, Boolean) ，這個寫法解決了 on-event 一個事件只能綁定一個 Function 的問題。事件監聽的事件需要加引號，且不需要加 on，例如點擊事件在 on-event 寫法為 onclick，在監聽時就只需要寫成 'click'。

範例： 綁定兩個 Function

<button id="button">點選</button>

var button = document.getElementById('button');
button.addEventListener('click', function(){
    console.log('我被點了');
});
button.addEventListener('click', function() {
    console.log('第二個');
});

上一篇：[快速入門前端 64] JavaScript：DOM (5) 節點的 CRUD - 修改、刪除
下一篇：[快速入門前端 66] JavaScript：事件 (2) Event 和事件解綁
系列文章列表：[快速入門前端] 系列文章索引列表