前一篇筆記介紹的是事件基本概念，而本篇將介紹一些在操作事件時常用的語法。

表單內容更動時觸發 - change

此事件僅限用於 元素、 和 元素，當元素的值改變時，change 事件就會觸發。對於下拉選擇框、複選框和單選按鈕，當使用者用游標作出選擇，該事件立即觸發；但對於其他類型的 元素，該事件將在元素失去焦點後才會觸發。
用法：跟事件監聽一起用
範例程式碼

按下鍵盤的觸發事件 - keyCode / keydown

按下鍵盤的那個剎那，就可以取得對應的鍵盤代碼，也就是所謂的 keyCode。
如果用函式帶入 e 參數，去執行 console.log(e.keyCode); 並且綁一個事件監聽 (keydown 事件) 在 body 上，按下鍵盤就可以查到該鍵盤的代碼。例如 1 對應到鍵盤代碼 49、2 對應到鍵盤代碼 50 等等。

var body = document.body;
function goRocket(e){
  console.log(e.keyCode); //查鍵盤代碼
}
body.addEventListener('keydown', goRocket ,false) //偵測按下按鍵的行為

如果按鍵要跟條件互相配合的時候，使用 switch 是個不錯的做法。
例：按數字 1（代碼 = 49）時，發射 1 號火箭（將 CSS bottom 屬性從 0 變成 2000）；按數字 2 跟 3 時同理類推。

function goRocket(e){
  switch(e.keyCode){
    case 49:
    document.querySelector('rocket-1').style.bottom = '2000 px';
    break;
    case 50:
    document.querySelector('rocket-2').style.bottom = '2000 px';
    break;
    case 51:
    document.querySelector('rocket-3').style.bottom = '2000 px';
    break;
  }
}

參照：比較 keydown, keypress, keyup 的差異

離開焦點時進行事件觸發 - blur

綁定 blur 事件的效果是，當元素失去焦點時會觸發特定行為。可以用在表單的防呆上。（提醒使用者沒有填到的欄位必填等等）
範例程式碼1：單一欄位沒填，跳出提示訊息（blur）
範例程式碼2：所有欄位沒填，不顯示 NaN 結果並且跳出提示訊息（if）

當游標滑到特定元素時觸發 - mousemove

範例程式碼

網頁座標 — screen、page、client

做法：監聽整個 body，搭配 mousemove 事件 + 函式（取得 screenX、screenY、pageX、pageY、clientX、clientY）

• page：代表「網頁」的 X 軸、Y 軸座標
• screen：「螢幕解析度」的 X 軸、Y 軸座標
• client：瀏覽器「視窗」的 X 軸、Y 軸座標，如果游標超出視窗範圍，Y 軸數字就不會再增加

應用：客製化滑鼠游標的圖案，範例程式碼

取消默認的觸發行為 - preventDefault

通常用在 a 連結或 submit 按鈕上，如果我們需要在這些元素上綁定事件，那就要適當地取消它們的預設行為。
例如，點擊 submit 的預設效果會直接傳送到後端，通常我們會取消這個預設效果，為何呢？因為很多時候我們要先用 JS 驗證要傳送的內容，確認無誤之後再傳送出去。
做法是在指定的 DOM 上使用監聽，並且在監聽行為的函式中使用 preventDefault 語法。

了解目前所在元素的位置 - e.target

如果我們的網頁上面有好幾層元素，要知道自己觸發的到底是哪個元素，可以用事件監聽 + 函式內執行 e.target 來得知。
例如，HTML 有一個 ul li 裡面又包一個 a 連結，該 ul 的 class 名叫做 .header：

var el = document.querySelector('.header');
el.addEvertListener('click' , function(e){
  console.log(e.target);
} , false)

這篇放了很多範例程式碼，為了避免篇幅過長所以都放在 codepen 裡面，然後也沒有提到 click 事件，因為它已經在前面出現很多次了 XD