JavaScript 事件類型
定義:
區別
當用戶進行頁面操作時,會有各種行爲產生,也就是所謂的交互(指的是用戶操作和頁面給予的反應),比如鼠標點擊,滑過,按下
鼠標類
| 事件 | 觸發條件 |
|---|---|
| click | 單擊 |
| dblclick | 雙擊 |
| contextmenu | 右擊 |
| mousedown | 按下 |
| mouseup | 擡起 |
| mousemove | 移動 |
| mouseover | 穿過–對應mouseout |
| mouseout | 離開–對應mouseover |
| mouseenter | 進入–對應mouseleave |
| mouseleave | 離開–對應mouseenter |
鍵盤類
| 事件 | 觸發條件 |
|---|---|
| keydown | 鍵盤按下 |
| keyup | 鍵盤擡起 |
| keypress | 鍵盤字符鍵 |
表單類
| 事件 | 觸發條件 |
|---|---|
| input | 輸入框輸入 |
| change | 改變 |
| submit | 表單提交 |
焦點類
| 事件 | 觸發條件 |
|---|---|
| focus | 獲取焦點 |
| blur | 失去焦點 |
Window
| 事件 | 觸發條件 |
|---|---|
| scroll | 滾動事件 |
| load | 加載事件 |
| resize | 視口尺寸改變 |
mouseover和mouseenter的區別
冒泡與不冒泡的區別:
首先樣式:
JS部分
事件觸發順序
總結
mouseover
事件會帶有事件冒泡 - - - - 大致概括就是 : 每次鼠標移入一個子元素中就會重新觸發over事件(先執行out再重新執行over - - - - 先出後進)
注意:如果兩個子元素有層疊關係,則同理每次離開和進入另一個子元素都會觸發over和out事件(冒泡原理)
mouseenter
事件不帶有事件冒泡 - - - - 只會根據事件本身的元素來觸發(子元素不影響事件觸發)
---------未完待續