昨日講了事件的綁定方法，範例中主要是點擊(click)事件，今日來介紹其他常用的事件吧。

DOM Event 觸發事件

change 表單內容更動觸發

這個在處理表單時常常會用到，像是要選地址時，使用者先選行政區，接著 js 偵測到使用者選擇下拉選單中的某個行政區，然後就 render 出該行政區中的所有道路。

動手玩

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

var select = document.querySelector("#select");
select.addEventListener('change', showValue);

function showValue(e){
  console.log(e.target.value);
  
  // 也等於
  console.log(this.value);
}

keydown 按下鍵盤觸發

這個可以用於

1. 偵測使用者輸入文字，可以搭配關鍵字即時搜尋。
2. 可以由 e 事件中得知使用者按了什麼按鍵，所以可以達到使用者按 Enter 就送出表單的效果。
   • Ps. 能夠取得的是按鍵的 keycode。

常見的 keycode: Enter: 13, space: 32, 1: 49, 2: 50, 3: 51...

動手玩

<input type="text" id="input">

var input = document.querySelector("#input");
input.addEventListener('keydown', showKey);

function showKey(e){
  console.log(e.keyCode);
  switch(e.keyCode){
    case 13:
      console.log('Enter');
      break;
    case 49:
      console.log('1');
      break;
    case 50:
      console.log('2');
      break;
    case 51:
      console.log('3');
      break;
  }
}

focus / blur 表單進入焦點/離開焦點觸發

此範例的效果為: 偵測到使用者離開 input 欄位時，會 console 出輸入的文字；若是沒有輸入任意字元，將會跳出 You must write something。

動手玩

Ps. 下方 callback function 使用了三元運算式、ES6 字串模板

<input type="text" id="input">

var input = document.getElementById("input");
input.addEventListener('blur', function(e){
  var value = this.value;
  (value != '')? console.log(`Your text is ${value}`):console.log('You must write something');
});

mousemove 滑鼠移動時觸發

在 Day16 有滑鼠移動的範例。

document.body.addEventListener('mousemove', function(){
  console.log('mouse hover');
});

mouseover 滑鼠進入元素時觸發

結合下方 mouseout 範例: 動手玩

<div id="box" style="background-color: orange; width: 150px; height: 150px"></div>

document.getElementById('box').addEventListener('mouseover', function(){
  console.log('進入 Box');
});

mouseout 滑鼠離開元素觸發

<div id="box" style="background-color: orange; width: 150px; height: 150px"></div>

document.getElementById('box').addEventListener('mouseout', function(){
  console.log('離開 Box');
});

copy 複製時觸發

可以用於阻止用戶複製網頁內文

動手玩

document.addEventListener('copy', function (e) {
    e.preventDefault();
    e.clipboardData.setData('text/plain', "Don't copy!");
});

說明:

• 如果預設行為沒有取消(preventDefault)，就複製所選內容到剪貼簿。
• 如果取消了預設行為，同時使用 setData 方法：就複製自訂內容到剪貼簿。
• 如果取消了預設行為，而且沒有使用 setData 方法，就不會有任何行為(使用者所選內容也不會複製到剪貼簿)。

paste 貼上時觸發

可用於輸入重要資料時，不希望使用者用複製貼上的方式來輸入資料。

動手玩

<label>
  請輸入密碼:
  <input type="password" id="pwd">
</label>

document.getElementById("pwd").addEventListener('paste', function(e){
    e.preventDefault();
    alert("密碼請勿用貼上的");
});

DOM 系列也差不多整理完了，接著會聊聊 cookie、localStorage、sessionStorage...

今日的分享就到這，我們明天見