DOM Event: 常用事件，Part 1

本文很大程度上参考、整理自《DOM Enlightenment》及网络

可以到MDN的Event reference去查看所有event及相关文档。

本文会讲述以下类型的常用事件：

• Focus事件
• Mouse事件
• Wheel事件
• Keyboard事件
• Touch事件
• Form事件

除非有特殊说明，事件都默认可冒泡（Bubbles），不可取消（Cancelable）。

Focus事件

• focus，当一个元素聚焦时（通过点击或tab）触发，该事件不冒泡；注意和没有该事件，document有
• blur，当一个元素失去聚焦时触发，不冒泡，类似上面的focus
• focusin与focusout，分别在focus前及blur前触发

Mouse事件

点击相关的：

• click，鼠标点击，在click之前还会触发mousedown及mouseup，可以取消
• dbclick，鼠标双击，会触发在click事件之后，可以取消
• mousedown及mouseup，鼠标按下及释放时触发，可以取消

移动相关的：

• mouseover，当鼠标移动到一个元素上面的时候触发，可以取消
• mouseout，当鼠标从元素里移走时触发，可以取消
• mouseenter，类似mouseover，但不冒泡，不可取消
• mouseleave，累死mouseout，但不冒泡，不可取消
• mousemove，当鼠标在元素内发生移动时触发

Wheel事件

• wheel（浏览器会使用mousewheel），鼠标滚轮滚动时触发，可取消

Keyboard事件

• keydown，键按下时触发，会在keypress之前；可以取消
• keypress，键按下并产生了字符，但在编辑框接收到该字符前触发；可以取消
• keyup，键松开时触发，会在keydown和keypress后面；可以取消

Touch事件

• touchstart，用户开始触摸屏幕时触发，可取消
• touchend，用户的触摸离开屏幕时触发，可取消
• touchmove，用户的触摸在屏幕上移动时触发，可取消
• touchcancel，触摸被取消的时候触发，例如手机突然锁屏、跳出了程序、移开到非document区域等
• touchenter及touchleave，触摸移动到一个元素内及触摸离开一个元素时触发

Form事件

• change，当一个input失去焦点且value发生已改变时触发；简单来说就是你填完用户名input后鼠标点击其他东西时会触发
• reset，当表单调用reset方法后会触发
• submit，当表单submit后触发，可取消
• select，�当表单里的input或textarea中的文字被选中时触发