為了要讓後面的練習更加清晰（為了我自己），今天我們不進動畫實作，先來重溫一下網頁前端的「事件監聽」吧！事件監聽又稱為 addEventListener ，我們可以在網頁的各式各樣的情境和元素中埋下監聽器，監聽使用者的行為以觸發更多我們想帶給使用者的效果。
addEventListener 函數通常會使用三個參數：
type ： 為事件類型，例如 Animation、Clipboard、KeyBoard、Mouse 等常見事件類型，更多可以參考 MDN - Event reference （https://developer.mozilla.org/en-US/docs/Web/Events）
listener ：對應的事件處理函式useCapture：Boolean 值，決定事件是以 true「Capture 捕獲」或 false「Bubble 冒泡」機制執行，預設為 false。參考來源：MDN addEventListener
有了 eventListener 可以幫助我們操作跟瀏覽器互動事件有關的行為，像是鍵盤、滑鼠、生命週期（Life cycle）等操作，利用這些特性結合就可以完成更多互動效果，像是繪圖板、遊戲、聊天室等進階網頁互動體驗。
| 事件名稱 | 觸發時機點 |
|---|---|
| click | 滑鼠點擊物件時 |
| dbclick | 滑鼠連點二下物件時 |
| mouseover | 將鼠標移動到元素或其子元素上方 |
| mousedown | 滑鼠點擊某元素 |
| mouseup | 滑鼠點擊某元素後移開時觸發 |
| mouseenter | 滑鼠游標移入了某元素 |
| mousemove | 滑鼠游標在這個元素內「移動」時 |
| mouseleave | 滑鼠游標離開了元素 |
| 事件名稱 | 觸發時機點 |
|---|---|
| keydown | 按下鍵盤按鍵時 |
| keypress | 按下鍵盤按鍵並放開後 |
| keyup | 放開鍵盤的瞬間觸發該事件 |
| 事件名稱 | 觸發時機點 |
|---|---|
| change | 下拉式選單、勾選等物件內容改變時，focus 離開後觸發 |
| input | 數入值元素被改變，輸入當下即被觸發 |
| submit | 按下送出按鈕，提交表單時被觸發 |
| blur | 元素從聚焦到失去焦點後被觸發 |
| focus | 元素被聚焦時，例如輸入框被選取到時 |
| 事件名稱 | 觸發時機點 |
|---|---|
| scroll | 當頁面滾軸滑動時 |
| resize | 當視窗或框架大小有變化時 |
偷聽到我們要的行為，下一步當然就是做出讓使用者 Wow 的效果！明天我們會以程式碼完成這樣的畫版作為監聽的練習。
大家可以先想想看這樣的一個畫版會用到哪些上面提到的事件監聽呢？
(妙麗式舉手) 老師我我我:
mousedown, mousemove , mouseup
mouse everything
iThome鐵人賽
看影片追技術