本文很大程度上参考、整理自《DOM Enlightenment》及网络
可以到MDN的Event reference去查看所有event及相关文档。
本文会讲述以下类型的常用事件:
- Focus事件
- Mouse事件
- Wheel事件
- Keyboard事件
- Touch事件
- Form事件
除非有特殊说明,事件都默认可冒泡(Bubbles),不可取消(Cancelable)。
Focus事件
- focus,当一个元素聚焦时(通过点击或tab)触发,该事件不冒泡;注意
<body>
和<frameset>
没有该事件,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中的文字被选中时触发