DOM中事件类型有：
UI（用户界面）事件，用户与页面上元素交互时触发 ；
焦点事件：当元素获得或失去焦点时触发；
鼠标事件：当用户通过鼠标在页面上执行操作时触发；
滚轮事件：当使用鼠标滚轮（或类似设备）时触发；
文本事件：当在文档中输入文本时触发；
键盘事件：当用户通过键盘在页面上执行操作时触发；
合成事件：当为IME（输入法编辑器）输入字符时触发；
变动事件：当底层DOM结构发生变化时触发；
一.UI事件
load:当前页面完全加载在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
unload：当页面完全卸载后再window上面触发，当所有框架都卸载后再框架集上触发，或者当嵌入的内容卸载完毕后在<object>元素上触发
abort:在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发
error：当发生javascript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一个火多个框架无法加载时在框架集上面触发。
select：当用户选择文本框中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时在window或框架上面触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。
二.焦点事件
blur :在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它
focus ：在元素获得焦点时触发，这个事件不会冒泡；所有浏览器都支持它。
focusin:在元素获得焦点时触发。这个事件与HTML事件focus等价。但它冒泡。支持这个事件的浏览器有IE5.5+、safari5.1+、Opera11.5+和Chrome
focusin:在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。支持这个事件的浏览器有IE5.5+、safari5.1+、Opera11.5+和Chrome
三.鼠标和滚轮事件
click:用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。
dblclick：在用户双击主鼠标按钮时触发
mousedown：在用户按下了任意鼠标按钮时触发，不能通过键盘触发这个事件
mouseenter:在鼠标光标从元素外部首次移动到元素范围内是触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。它从DOM3开始才纳入规范.IE Firefox9+ Opera支持这个事件。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发这个事件不冒泡，而且在光标移动到后代元素上不会触发。它从DOM3开始才纳入规范.IE Firefox9+ Opera支持这个事件。
mousemove：当鼠标指针在元素内部移动时重复的触发，不能通过键盘触发这个事件
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
mouseover：在鼠标位于一个元素外部，然后用户将其首次移入另一个元素边界内触发。不能通过键盘触发这个事件
mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件
注释：只有在同一个元素上相继触发mousedown和mouseup事件才会触发click事件；如果mousedown和mouseup中的一个被取消就不会触发click事件。click事件触发的顺序如：mousedown mouseover click ；dblclick事件触发的顺序如：mousedown mouseover click mousedown mouseover click dblclick
1.客户区坐标 clientX 与clientY 2.页面坐标位置 pageX 和pageY 而在IE8及更早版本需要用到document.body（混杂模式）或document.documentElement（标准模式）中的scrollLeft 和scrollTop属性 3.屏幕坐标位置 使用screenX和screenY属性来确定相对于屏幕的坐标信息。
4.修改键 DOM规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey、metaKey 如果相应的键被按下了，则值时true否则为false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键
5.相关元素：DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件这个属性的值是null IE8及之前版本不支持relatedTarget，它提供了两个属性来完成类似功能。在mouseover事件触发时，IE的formElement保存了相关元素；在mouseout事件触发时，IE的toElement属性中保存着相关元素
6.鼠标按钮：只有在主鼠标被单击时才会触发click事件，因此检测按钮信息并不是必要的。但对于mousedown和mouseup事件来说，则在其event事件存在一个button属性表示按下和释放按钮；DOM中的button属性可能有3个值：0表示主鼠标按钮 ；1表示中间的鼠标按钮，2表示次鼠标按钮。由于IE8之前也提供的相同的button属性 但分的更细有8个值，由于3个值的更实用。所以兼容代码如下：
//鼠标左键右键和滚轮的兼容
getButton : function(event){
if (document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else {
//以下是IE中的兼容方法，IE的更不实用
switch (event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
7.更多的事件信息 ”DOM2级事件“ 规范event对象中还提供了detail属性，用于给有关事件提供更多信息。对于鼠标事件来说，detail中包含了一个数值，表示在给定位置上发生了多少次单击。
8.鼠标滚轮事件：mousewheel事件 非常流行而且所有浏览器都支持它。所以HTML5也加入了该事件
//兼容获取鼠标滚轮信息（这段兼容代码存在问题）
getWheelDelta: function(event){
//为了兼容opera早期的版本
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
//之所以乘40是火狐返回的是3与-3
return -event.detail * 40;
}
}上面代码存在问题IE中无法识别client.engine.opera。所以只能在火狐中实现。但如果将判断opera早期版本的去掉应该是可以的。
9触摸设备IOS和Android设备的实现非常特别，因为这些设备没有鼠标。注意几点如下：
1.不支持dbclick事件。双击浏览器窗口会放大画面。而且没有办法改变该行为。
2.轻击可单击元素会触发mousemove事件。如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有因此变化，那么会依次产生mousedown、mouseup、和click事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素，或者那些已经被指定了onclick事件处理程序的元素
3.mousemove事件也会触发mouseover和mouseout事件。
4.两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll事件
四。键盘与文本事件有三个键盘事件：keydown当用户按下键盘上的任意键时触发 keypress当用户按下键盘上的字符键时触发 keyup当用户释放键盘上的键时触发。 还有一个文本事件textInput 这个事件是对keypress事件的补充，用意是在将文本显示给用户之前更容易拦截文本，在文本插入文本框之前会触发textInput事件
在用户按下一个键盘上的字符键是，首先会触发事件的顺序是：keydown keypress keyup 如果用户按下一个字符键不放就会重复触发keydown和keypress事件， 直到用户松开该键为止。如果用户按下的是一个非字符键，那么触发事件的顺序是：keydown keyup 如果按住这个非字符键不放，那就会一直重复触发keydown事件，直到用户松开这个键时，才会触发keyup。键盘事件和鼠标事件一样，都支持相同的修改键，键盘事件的事件对象中也有shiftKey ctrlKey altKey 和metaKey属性。
DOM3级事件中键盘事件不再包含charCode事件，二是包含两个新属性：key和char 其中key 在按下的是字符和非字符显示的结果都是一样的，而char只有在按下的时候是字符才会显示，按下非字符则值为null。 还添加了一个属性名为location表示按下了什么位置的键。 （由于存在跨浏览器问题（IE9支持Key属性，但不支持char属性，safari5和chrome支持名为keyIdentifier的属性），因此不推荐使用）
DOM3级事件引入了一个新事件 textInput 它与keypress的差别 一是只有可编辑区域才能触发textInput事件 区别之二是textInput事件只会在用户按下能够输入实际字符的键时才会被触发。而keypress事件则在按下那些能够影响文本显示的键时也会触发。支持textInput属性的浏览器有IE9+、safari和chrome
HTML5中的事件类型
- onabort：当发生中止事件时运行脚本
- onblur：当失去焦点时运行脚本
- oncanplay：当媒体能够开始播放但可能因缓冲而需要停止时运行脚本（例如缓冲了一部分）
- oncanplaythrough：当媒体能够无需因缓冲而停止即可播放至结尾时运行脚本（例如已缓冲了所有）
- onchange：当元素改变时运行脚本
- onclick：当单击鼠标时运行脚本
- oncontextmenu：当触发上下文菜单时运行脚本
- ondblclick：当双击鼠标时运行脚本
- ondrag：当拖动元素时运行脚本
- ondragend：当拖动操作结束时运行脚本
- ondragenter：当元素被拖动至有效的拖放目标时运行脚本（进入时）
- ondragleave：当元素离开有效拖放目标时运行脚本（离开时）
- ondragover：当元素被拖动至有效拖放目标上方时运行脚本（悬上时）
- ondragstart：当拖动操作开始时运行脚本
- ondrop：当被拖动元素正在被拖放时运行脚本
- ondurationchange：当媒体长度改变时运行脚本
- onemptied：当媒体资源元素突然为空时（网络错误、加载错误等）运行脚本
- onended：当媒体已抵达结尾时运行脚本
- onerror：当在元素加载期间发生错误时运行脚本
- onfocus：当获得焦点时运行脚本
- onformchange：当表单改变时运行脚本
- onforminput：当表单获得用户输入时运行脚本
- oninput：当元素获得用户输入时运行脚本
- oninvalid：当元素无效时运行脚本
- onkeydown：当按下按键时运行脚本（还没松开时就触发）
- onkeypress：当按下并松开按键时运行脚本（必须经历按下、松开这一过程才触发）
- onkeyup：当松开按键时运行脚本（松开时即触发）
- onload：当加载时运行脚本
- onloadeddata：当加载媒体数据时运行脚本
- onloadedmetadata：当媒体元素的持续时间以及其他媒介数据已加载时运行脚本
- onloadstart：当浏览器开始加载媒介数据时运行脚本
- onmousedown： 当按下鼠标按钮时运行脚本
- onmousemove：当鼠标指针移动时运行脚本
- onmouseout：当鼠标指针移出元素时运行脚本
- onmouseover：当鼠标指针移至元素之上时运行脚本
- onmouseup：当松开鼠标按钮时运行脚本
- onmousewheel： 当转动鼠标滚轮时运行脚本
- onpause： 当媒体数据暂停时运行脚本
- onplay：当媒体数据将要开始播放时运行脚本
- onplaying：当媒体数据已开始播放时运行脚本
- onprogress：当浏览器正在取媒体数据时运行脚本
- onratechange：当媒体数据的播放速率改变时运行脚本
- onreadystatechange：当就绪状态（ready-state）改变时运行脚本
- onreset：当表单重置时运行脚本
- onscroll：当滚动元素滚动元素的滚动条时运行脚本
- onseeked：当媒体元素的定位属性不再为真且定位已结束时运行脚本
- onseeking：当媒介元素的定位属性为真且定位已开始时运行脚本
- onselect：当选取元素时运行脚本
- onshow：
- onstalled：当取回媒体数据过程中（延迟）存在错误时运行脚本
- onsubmit：当提交表单时运行脚本
- onsuspend：当浏览器已在取媒介数据但在取回整个媒体文件之前停止时运行脚本
- ontimeupdate：当媒体改变其播放位置时运行脚本
- onvolumechange：当媒体改变音量亦或当音量被设置为静音时运行脚本
- onwaiting：当媒体已停止播放但打算继续播放时运行脚本
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
