# [JavaScript] 滑鼠事件整理

###### tags: `前端筆記`

## 1. `event: click`

滑鼠點擊左鍵就會觸發，嚴格來說，滑鼠的點擊（左鍵按下 -> 左鍵鬆開）需要發生在事件影響的元素之內才會觸發

- 是否會冒泡：true

[click event example](https://codepen.io/lun0223/pen/dyVdyLw)

## 2. `event: mouseenter`

滑鼠進入到綁定事件的元素範圍內就會觸發，需要注意的是當滑鼠進入事件元素範圍內觸發完後需要再次離開範圍，重新進入才會再次觸發

- 是否會冒泡：false

## 3. `event: mouseleave`

當滑鼠完全離開綁定事件元素之範圍才會觸發

- 是否會冒泡：false

==`mouseleave` 及 `mouseenter` 配合在一起可以做出 `css :hover` 的效果==

[mouseenter / mouseleave event example](https://codepen.io/lun0223/pen/mdBXyyb)

## 4. `event: mouseover`

與 `mouseenter` 很像，但是 `mouseover` 會冒泡，所以當滑鼠進入綁定事件容器以及滑鼠碰到子項目時也會觸發 `mouseover`

- 是否會冒泡：true

[mouseenter / mouseleave event example](https://codepen.io/lun0223/pen/xxXYbOQ)

## 5. `event: mouseout`

當滑鼠離開綁定事件的元素時會觸發，需要注意的是 `mouseout` 會冒泡，所以當滑鼠進入綁定事件的容器並在項目之間移動時，滑鼠離開項目的區塊也會因為冒泡的緣故觸發容器的事件

- 是否會冒泡：true

[mouseover event example](https://codepen.io/lun0223/pen/vYedOOy)

## 參考資料
1. [Mouse Event 小筆記](https://medium.com/@shizukuichi/mouse-event-%E5%B0%8F%E7%AD%86%E8%A8%98-feb5dd866b0)