UI事件
load:当页面完全加载后在 window 上面触发。
unload:当页面完全卸载后在 window 上面触发,或者当嵌入的内容卸载完毕后在<object>
元素上面触发。
abort:在用户停止下载过程时,如果嵌入的内容没有加载完,则在<object>
元素上面触发。
error:当发生 JavaScript 错误时在 window 上面触发,当无法加载图像时在<img>
元素上面触
发,当无法加载嵌入内容时在<object>
元素上面触发,或者当有一或多个框架无法加载时在框架集上面触发。
select:当用户选择文本框(<input>
或<texterea>
)中的一或多个字符时触发。
resize:当窗口或框架的大小变化时在 window 或框架上面触发。
scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发。<body>
元素中包含所加
载页面的滚动条。
焦点事件
blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
focusin:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价,但它冒泡。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
focusout:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
鼠标事件
click:在用户单击主鼠标按钮(一般是左键)。
dblclick:在用户双击主鼠标按钮(一般是左键)时触发。
mousedown:在用户按下了任意鼠标按钮时触发。
mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。
mousemove:当鼠标指针在元素内部移动时重复地触发。
mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。
mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。
mouseup:在用户释放鼠标按钮时触发。
页面上的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。
触摸设备
不支持 dblclick 事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。
轻击可单击元素会触发 mousemove 事件。
滚轮事件
mousewheel:给页面中的任何元素或 document 对象绑定该事件,即可处理鼠标滚轮操作。IE 6.0 首先实现了 mousewheel 事件。此后,Opera、Chrome 和 Safari 也都实现了这个事件。
DOMMouseScroll:Firefox支持此鼠标滚轮事件。
触摸设备
mousemove 事件也会触发 mouseover 和 mouseout 事件。
两个手指放在屏幕上且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件。
文本事件
textInput:在文本插入文本框之前会触发 textInput 事件。
textInput只会在用户按下能够输入实际字符的键时才会被触发。
键盘事件
keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
keyup:当用户释放键盘上的键时触发。
keydown 和 keypress 都是在文本框发生变化之前被触发的。keyup事件则是在文本框已经发生变化之后被触发。
合成事件
compositionstart:在 IME 的文本复合系统打开时触发,表示要开始输入了。
compositionupdate:在向输入字段中插入新字符时触发。
compositionend:在 IME 的文本复合系统关闭时触发,表示返回正常键盘输入状态。
没什么卵用
变动事件
DOMSubtreeModified:在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发。
DOMNodeRemoved:在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted
之后触发。
DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved
之后触发。
DOMAttrModified:在特性被修改之后触发。
DOMCharacterDataModified:在文本节点的值发生变化时触发。
HTML5 事件
DOMContentLoaded在页面形成完整的 DOM 树之后就会触发。
beforeunload:在浏览器卸载页面之前触发,可以通过它来取消卸载并继续使用原有页面。
contextmenu:通过单击鼠标右键可以调出上下文菜单时触发,该事件是冒泡的。
pageshow:Firefox 和 Opera 有一个特性叫‘往返缓存(bfcache)’。在重新加载的页面,pageshow
会在load
事件触发后触发;而对于 bfcache 中的页面,就不会触发load
,而pageshow
会在页面状态完全恢复的那一刻触发。
pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。如果页面被保存在了 bfcache 中,则这个属性的值为 true;否则,这个属性的值为 false。
hashchange:在 URL 的参数列表(及 URL 中“#”号后面的所有字符串)发生变化时触发。
设备事件
orientationchange:Safari中移动设备屏幕横纵向转换时触发,需从
window.orientation
中获取转向信息,值为90(左旋转的横向模式),0(纵向模式),-90(右旋转的横向模式)。
deviceorientation:加速计检测到设备方向变化时在 window 对象上触发。设备在三维空间中是靠 x、y 和 z 轴来定位的。当设备静止放在水平表面上时,这三个值都是 0。x轴方向是从左往右,y 轴方向是从下往上,z 轴方向是从后往前。事件对象
event
包含5个属性。
1.alpha:在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差;是一个介于 0 到 360 之间的浮点数。
2.beta:在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差;是一个介于180 到 180 之间的浮点数。
3.gamma:在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差;是一个介于90 到 90 之间的浮点数。
4.absolute:布尔值,表示设备是否返回一个绝对值。
5.compassCalibrated:布尔值,表示设备的指南针是否校准过。
devicemotion:这个事件是要告诉开发人员设备什么时候移动,而不仅仅是设备方向如何改变。事件对象
event
包含4个属性。
1.acceleration:一个包含 x、y 和 z 属性的对象,在不考虑重力的情况下,告诉你在每个方向上的加速度。
2.accelerationIncludingGravity:一个包含 x、y 和 z 属性的对象,在考虑 z 轴自然重力加速度的情况下,告诉你在每个方向上的加速度。
3.interval:以毫秒表示的时间值,必须在另一个 devicemotion 事件触发前传入。这个值在每个事件中应该是一个常量。
4.rotationRate:一个包含表示方向的 alpha、beta 和 gamma 属性的对象。
触摸事件
touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发。
touchend:当手指从屏幕上移开时触发。
上面这几个事件都会冒泡,也都可以取消。
触摸事件执行顺序:
(1) touchstart
(2) mouseover
(3) mousemove(一次)
(4) mousedown
(5) mouseup
(6) click
(7) touchend
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend:当任何一个手指从屏幕上面移开时触发。
PS:还并不完全