什麼是事件(event)？

事件是 JavaScript 應用的心臟，也是把所有東西黏在一起的膠水，當我們與網頁進行某些互動時，事件就發生了。
例如，當使用者點擊了按鈕，才會啟動對話框的顯示，那麼「點擊按鈕」這件事，就被稱作「事件」(Event)，而負責處理事件的程式通常被稱為「事件處理器」(Event Handler)，也就是「啟動對話框的顯示」這個動作。

event 參數

var el = querySelector('.btn');
  el.onclick = function(e){
  console.log(e);
}

解說一下這段程式碼。
function() 中代入的參數 e，代表 event，透過這個方法可以得到當事件發生時，發生事件的元素上的各種資訊。（參照：重新認識 JavaScript: Day 15 隱藏在 "事件" 之中的秘密）
這段程式碼的事件是以點擊為例，點擊按鈕可以查到各式各樣的資訊，包含點擊時游標的 x 軸跟 y 軸座標，可應用在製作遊戲上。

各種事件綁定的差異

1. 在 HTML 標籤內直接寫 JS（舊式寫法，不推薦）
   容易被駭客植入惡意程式碼
   <input onclick="alert('say Hello')" type="button" class="btn" value="點擊">

2. on-event 處理器
   主要的缺點為一個事件只能綁定一個函式。如果用此方法在同一個事件上綁定兩個不同函式，會造成兩個函式都無法如預期般正確運作。
   on-event 處理器的語法操作如下：
   目標的 DOM 節點.事件名稱（名稱前冠上 on 詞頭） = 欲執行的函式名稱（不需要小括號）或匿名函式;
   上一段在介紹 event 參數時的程式碼，就是使用了 on-event 處理器綁定一個匿名函式。

3. 事件監聽（新寫法，推薦）
   addEventListener 跟 on-event 處理器的差別在於，前者可以在一個 DOM 上執行兩個以上的函式；如果是在 DOM 上使用後者，就只能綁定一個函式。

事件監聽 (addEventListener) 的寫法

要填入三個參數，第一個參數寫事件名稱並用引號包圍；第二個參數寫一個函式（匿名或命名皆可），若需獲取觸發事件的資料則帶入 e 參數；最後一個參數大部分情況都寫 false（理由下面解釋）。
★ 寫事件名稱時，不用加「on」，例如 click 事件在 on-event 處理器要寫 onclick，但在事件監聽器就寫 click 就好。

var el = document.querySelector('.btn');
el.addEventListener('click',function(e){
  alert('Hello');
},false)

事件監聽的第三個參數

• false（事件氣泡，Event Bubbling）- 從指定元素往外層找
• true（事件捕捉，Event Capuring）- 從最外面找到指定元素
  如果在監聽程式碼裡不寫第三個參數，則預設值是 false。

從父元素來監聽子元素

當父元素之下的每個子元素都需要被監聽時，比起在單一個子元素上綁定監聽，更好的做法是直接透過父元素監聽子元素的內容。

如果想要選取父元素中特定的 DOM，可以在函式中用 if 下條件去篩選出來，例如用 e.target.nodeName 可以篩選出特定的 HTML 標籤。
範例程式碼：（codepen 連結）

var list = document.querySelector('.list');

list.addEventListener('click',checkName,false)
function checkName(e){
  if(e.target.nodeName!=='LI'){return};
  console.log(e.target.textContent);
}

中止冒泡事件

執行當下接收的監聽後，其他的監聽就會一律中斷。當我們的網頁上的元素層層疊疊而導致重複執行動作時，如果希望只執行所點擊的元素就好，就要中止冒泡。
在監聽器的函式內多寫一行：
e.stopPropagation;
另外，當我們的監聽是事件捕捉（true），而我們希望只有被點擊元素的父層執行動作時，一樣也是多加這一行。

參考資料：
JavaScript事件處理的方式(三種)
重新認識 JavaScript: Day 14 事件機制的原理
DOM on-event 處理器 - Web 開發者指引 | MDN

弱弱問一句，有人能告訴我，怎麼在這裡的文章嵌入 codepen 嗎？ QQ