js的事件种类整理

鼠标事件 (继承MouseEvent接口)
鼠标事件 描述
click 按下鼠标时触发
dblclick 双击鼠标时触发
mousedown 按下鼠标键时触发
mouseup 释放按下鼠标键触发
mousemove 鼠标在节点内部移动触发,持续移动,事件会持续触发(会有性能问题)
mouseenter 鼠标进入节点触发,进入子节点不会触发。(在节点内只会触发一次)
mouseover 鼠标进入节点触发,进入子节点会再一次触发
mouseout 鼠标离开节点触发,离开父节点也会触发
mouseleave 鼠标离开节点触发,离开父节点不会触发
contextmenu 鼠标右键(右键菜单)前触发,或按下右键菜单时触发
wheel 滚动鼠标的滚轮时触发,继承WheelEvent接口

触发顺序: mouseDown > mouseup > click > dblclick

mouseover 和 mouseenter 的共同点:鼠标进入一个节点触发

区别:

  • mouseover 会在子节点触发多次
  • mouseenter 只触发一次

mouseout 和 mouseleave 共同点: 鼠标离开一个节点时触发
区别:

  • 在父元素内部离开一个子元素时,mouseout事件会触发。
  • 在父元素内部离开一个子元素时,mouseout事件不会触发。

键盘事件 (继承KeyboardEvent接口)

键盘事件 描述
keydown 按下键盘时触发
keypress 按下有值的键触发,(无值键Ctrl、Alt、Shift、Meta ) ,会先出发keydown
keyup 松开键盘时触发

用户一直按键不松开:

1.keydown
2.keypress
3.keydown
4.keypress
5. ...(重复上面过程)
6.keyup

进度事件 (继承ProgressEvent接口)

描述资源加载的进度。主要由AJAX、