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、<img>、<audio>、<video>、<style>、<link> 等外部资源的加载触发。

进度事件	描述
abort	外部资源中止加载时（比如用户取消）触发，发生错误导致中止不会触发。
error	由于错误导致外部资源无法加载时触发（error特性，不会冒泡，不会触发父元素的error时间监听函数）
load	外部资源加载成功时触发
loadstart	外部资源开始加载时触发
loadend	外部资源停止加载时触发，发生顺序在error、abort、load等事件的后面。
progress	外部资源加载过程中不断触发
timeout	加载超时时触发

注意：
按照习惯js脚本一般都放置在页面底部，有时候图片加载会在脚本运行之前就完成，因此有可能load和error事件的监听函数不会执行。
解决办法：使用complete属性先判断一下是否加载完成。

function loaded(){
  // ...
}
if(image.complete){
  loaded();
}else{
  image.addEventListener('load',loaded)
}

DOM元素节点没有提供是否加载错误的属性，所以error事件的监听函数最好放到<img>元素的HTML代码中，这样可以保证发生加载错误时百分之百会执行。

<img src="/wrong/url" onerror="this.style.display='none';"/>

loadend事件的监听函数，可以用来取代abort事件、load事件、error事件的监听函数，因为总是在这些事件之后发生。

拖拉事件 （继承DragEvent接口）

DragEvent接口又继承了MouseEvent接口和Event接口。

拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。
元素节点是默认不可以拖拽的，可以设置属性draggable="true"改为可拖拽
元素被拖拽时，会持续触发拖拉事件

拖拉事件	描述
drag	在拖拽节点上持续触发（间隔几百毫秒）
dragstart	开始拖拉时，在被拖拉的节点上触发
dragend	拖拉结束时，在被拖拉的节点上触发
dragenter	拖拉进入当前节点时，在当前节点上触发一次
dragover	拖拉进入当前节点时，在当前节点上持续触发（间隔几百毫秒）
dragleave	拖拉离开当前节点范围内，在当前节点上触发
drop	释放目标节点时，在目标节点上触发。