今天會簡單統整一下一些有關滑鼠以及鍵盤的事件

滑鼠點擊相關的有以下:

• mousedown：按下滑鼠時
• mouseup：放開滑鼠
• click：點擊滑鼠，也就是按下及放開都有觸發才算是click
• dblclick：點擊同一個元素兩下，通常很少使用到(我還沒用到過XDD
• contextmenu：點擊滑鼠右鍵時

滑鼠移動的有以下:

• mouseover：滑鼠移入時
• mouseout：滑鼠移出時
• mousemove：滑鼠移動的時候都會監聽，等於幾乎是無時無刻在監聽，這可能會讓整體效能降低!請小心使用
• mouseenter：滑鼠進入時
• mouseleave：滑鼠離開時

那麼你可能會問 mouseover 跟 mouseenter差別在哪? 其實就是差在
mouseover、mouseleave有支援冒泡而mouseenter、mouseout沒有
mouseover、mouseleave的觸發時機早於mouseenter、mouseout

document.querySelector('.out').addEventListener('mouseover',function(){
  console.log('out')
})

document.querySelector('.in').addEventListener('mouseover',function(){
  console.log('in')
})

我們先建立兩個div區塊，先使用mouseover示範，由左進入到in這個div時，你會發現他又觸發了一次out，是因為進入in的時候他會向上傳遞，走冒泡事件，所以等於是又從out進去一次了!

觸發時間我們也能看到同時幫外層監聽兩個事件但over早於enter

document.querySelector('.out').addEventListener('mouseenter',function(){
  console.log('enter')
})

document.querySelector('.out').addEventListener('mouseover',function(){
  console.log('over')
})

鍵盤相關的有以下:

• keydown：按下按鍵時，像是mousedown
• keyup：放開按鍵時，像是mouseup
• keypress：點擊按鍵時，像是 click，但是 keyPress 只會在你按下的按鍵能夠產生出字元的時候才會觸發喔!也就是說你有打出字才會觸發，如果是 shift等等按鍵不會觸發。

如果還不清楚的話可以到w3school的網頁試試看!
Key and Character Codes vs. Event Types

今天就講解到這邊，大家明天見!