html开发事件：事件类型分析。

“DOM3级事件”规定了以下几类事件：
UI事件：当用户与页面上的元素交互时触发。 焦点事件：当用户获得或失去焦点时触发。 滚轮事件：当使用鼠标滚轮（或类似设备）时触发。 文本事件：当在文档中输入文本时触发。 键盘事件：当用户通过键盘在页面上执行操作时触发。 合成事件：当为IME输入字符时触发。 变动事件：当底层DOM结构发生变化时触发。

UI事件

UI事件指的是那些不一定与用户操作有关的事件。 多数这些事件都与window对象或表单控件有关。

load事件

当页面完全加载后（包括所有图像、JavaScript文件、css文件等外部资源），就会触发window上面的load事件。 定义onload事件处理程序的方式：
EventUtil对象中的方法 为元素添加一个onload特性
一般来说，在window上面发生的任何事件都可以在元素中通过相应的特性来指定，因为在HTML中无法访问window元素，但不建议这样使用。 图像也可以触发（DOM/HTML）
在DOM中，要在指定src属性之前先指定事件。 新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。 使用DOM0级的Image对象实现，在DOM出现之前，开发人员经常使用Image对象在客户端预先加载图像，但是无法将其添加到DOM树中。 <script> 元素也会触发load事件
以便开发人员确定动态加载的javascript文件是否加载完毕。 与图像不同，设置src并将其添加到文档后，才会开始下载文件。

unload事件

这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生该事件。 可以 清除引用，以避免内存泄漏 触发unload事件，在页面加载后存在的那些对象也就不一定存在了，此时操作就会导致错误。

resize事件

当浏览器窗口被调整到一个新的高度或宽度时，就会触发。 这个事件在window（窗口）上面触发，因此可以通过javascript或者元素中的onresize特性来指定事件处理程序。

scroll事件

在文档滚动期间触发。

在window对象上发生，但实际上表示的是页面中相应元素的变化。

document.documentElement.scrollTop;//标准模式
document.body.scrollTop;//混杂模式

注意： 由于浏览器的差异，scroll事件和resize事件可能会被重复触发，所以尽量保持事件处理程序的代码简单。

焦点事件

焦点事件会在页面元素获得或失去焦点时触发。

6个焦点事件

在元素失去焦点时触发。
focusout 1 blur 3 DOMFocusOut 4 在元素获得焦点时触发。
focusin 2 focus 5 DOMFocusIn 6 上述后面的数字代表当焦点从一个元素移动到另一个元素后触发的事件顺序。

鼠标与滚轮事件

9个鼠标事件

click ：左键单击啊/回车键 dbclick ：左键双击 mousudown ：按下了任意鼠标按钮 mouseenter ：首次移动到元素范围内部 mouseleave ：移动到元素范围之外 mousemove ：在元素内部移动时重复地触发 mouseout ：鼠标从一个元素上方，移入另一个元素 mouseover ：从一个元素外部首次移入另一个元素内部 mouseup ：释放鼠标按钮时 页面上的所有元素都支持鼠标事件。 取消鼠标事件将会影响浏览器的默认行为。

滚轮事件

mousewheel事件，跟踪鼠标滚轮，类似于Mac的触控板。

1.客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。 clientX和clientY表示视口中的水平和垂直坐标。

2.页面坐标位置

pageX和pageY表示在页面中的水平和垂直坐标。 页面坐标=视口坐标+滚动信息

3.屏幕坐标位置

相对于整个电脑屏幕的位置。 screenX和screenY

4.修改键

在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。 修改键：Shift、Ctrl、Alt、Meta 4个属性，表示这些修改键的状态，布尔值，被按下为true
shiftKey ctrlKey altKey metaKey

5.相关元素

在发生mouseover和mouseout事件时，还会涉及更多的元素。 DOM通过event对象的relateTarget属性提供了相关元素的信息。这个属性只对于上述2个事件才包含值，对于其他事件，值为null。 ie不支持上述属性
mouseover：fromElement mouseout：toElement

6.鼠标按钮

对于mousedown和mouseup事件，在其event对象存在一个button属性，表示按下或释放的按钮。 button属性有3个值：
0：主鼠标按钮 1：中间的鼠标按钮 2：次鼠标按钮 ie中的版本不同，需要通过MouseEvents特性来检测，来确定是否包含正确的值，如果测试失败，说明是ie

7.更多的事件信息

在event对象中还提供了detail属性，用于给出有关事件的更多信息。 鼠标事件：detail中包含了一个数值，表示在给定位置上发生了多少次单击。

8.鼠标滚轮事件

这个事件可以在任何元素上面触发。最终会冒泡到document对象。 与mousewheel事件对应的event对象还包含一个wheelDelta属性。
向前滚动：值为120的倍数 向后滚动：值为-120的倍数 在opera9.5之前，上述正负号相反。 firefox支持一个DOMMouseScroll的类似事件，信息保存在detail中
向前滚动：-3的倍数 向后滚动：3的倍数

兼容性

getWheelDelta:function(event){
    if(event.wheelDelta){
        return (client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
    }
    else{
        return -event.detail*40;
    }
}

9.触摸设备

不支持dbclick事件 轻击可单击元素会触发mousemove事件 mousemove事件也会触发mouseover和mouseout事件 两个手指放在屏幕上且页面随手指一动而滚动时会触发mousewheel和scroll事件

10.无障碍问题

使用click事件执行代码 不要使用mouseover向用户显示新的选项。 不要使用dbclick执行重要的操作

键盘与文本事件

3个键盘事件

keydown：按下键盘上的任意键触发。1 keypress：按下键盘上的字符键触发（包括esc）2 keyup：释放键盘上的键时触发。3 只有在通过文本框输入文本时才最常用到。

键码

在发生keydown和keyup事件时，event对象的keyCode属性中会保存一个代码，与键盘上一个特定的键对应。 对数字字母字符键，keyCode对应ASCLL码，字母为小写的ascll码。

字符编码

发生keypress事件意味着按下的键会影响到屏幕中文本的显示。 charCode属性，只有在发生keypress事件时才包含值。值为按下的那个键的ASCLL编码。

DOM3级变化

DOM3级事件中，不再包含charCode属性。 包含新属性：
key：值是一个字符串。被按下的文本字符，非字符键键时，是相应键名 char：按下为字符键时同上，非字符键时为null 新属性（ie9支持）：location，数值，表示按下了什么位置的键：
0：默认键盘 1：左侧 2：右侧 3：数字小键盘 4：移动设备键盘 5：手柄 等价上述属性（safari和chrome支持）：keyLocation属性，有bug，除了按下数字键盘为3，其余都为0 给event对象添加了getModifierState()方法。（ie9支持）
接收一个参数，即等于shift。。的字符串 表示要检测的修改符 如果是被按下的，值为true

textInput事件

当用户在可编辑区域中输入字符时，就会触发这个事件。 它的event对象包含一个data属性，值为输入的字符 还有一个inputMethod属性，表示把文本输入到文本框的方式

设备中的键盘事件

Wii遥控器上的按键时触发

复合事件

用于处理IME的输入序列 IME可以让用户输入在物理键盘上找不到的字符。 IME通常需要同时按住多个键，但最终只输入一个字符

3种复合事件

compositionstart：在IME的文本复合系统打开时触发 compositionupdate：在向输入字段中插入新字符时触发 compositionend：在IME的文本复合系统关闭时触发 目标是接收文本的输入字段 data属性：
compositionstart：包含正在编辑的文本 compositionupdate：包含正插入的新字符 compositionend：包含此次输入会话中的所有字符

变动事件

DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。 变动事件是为XML或HTML DOM设计的，并不特定于某种语言。

删除节点

在使用removeChild()或replaceChild()从DOM中删除节点时，首先会触发DOMNodeRemoved事件。
事件目标：被删除的节点 event.relateNode：对目标节点父节点的引用 parentNode：父节点 冒泡 如果被删除的节点包含子节点，那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFromDocument事件。
但这个事件不会冒泡。 目标：相应的子节点或者那个被移除的节点。 紧随其后的是DOMSubtreeModified事件
目标：被移除的父节点

插入节点

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时，首先会触发DOMNodeInserted事件。
目标：被插入的节点 event.relateNode：对目标节点父节点的引用 冒泡 紧接着，会在新插入的节点上面触发DOMNodeInsertedDocument事件。
不冒泡 目标：被插入的节点 最后一个触发的是DOMSubtreeModified，触发于新插入节点的父节点。

HTML5事件

contextmenu事件

用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。 冒泡 目标：发生用户操作的元素 在所有浏览器中都可以取消这个事件
event.preventDefault()：兼容DOM的浏览器 event.returnValue：ie 属于鼠标事件，包含与光标位置有关的所有属性。 通常使用contextmenu事件来显示自定义的上下文菜单，使用onclick事件处理程序来隐藏该菜单。

beforeunload事件

之所以有发生在window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。 在浏览器卸载页面之前触发。

DOMContentLoaded事件

在形成完整的DOM树之后就会触发，不理会图像、javascript文件、css文件或其他资源是否已经下载完毕。 可以为document或window添加相应的事件处理程序（尽管这个事件会冒泡到window，但它的目标实际上是document） 这个事件始终都会在load事件之前触发。

readystatechange事件

提供与文档或元素的加载状态有关的信息。 readyState属性，值为：
uninitialized（未初始化）：对象存在但尚未初始化 loading（正在加载）：对象正在加载数据 loaded（加载完毕）：对象加载数据完成 interactive（交互）：可以互相操作对象了，但还没有完全加载。 complete（完成）：对象已经加载完毕。 对于document而言，值为“interactive”的readyState会在与DOMContentLoaded大致相同时触发readyStatechange事件。 在与load事件一起使用时，无法预料两个事件触发的先后顺序。 交互阶段可能会早于也可能会晚于完成阶段出现，无法确保顺序。 <script>和元素也会触发readystatechange事件
可以用来确定外部的javascript和css文件是否已经加载完成 也存在无论等于”loaded“还是”complete“都可以表示资源已经可用。 要一并检测上述两个状态，并在调用了一次事件处理程序后就将其移除。

pageshow和pagehide事件

往返缓存bfcache
将整个页面都保存在了内存里。 可以加快页面的转换速度。 如果页面位于bdcache中，那么再次打开该页面时就不会触发load事件。 pageshow
在页面显示时触发，无论该页面是否来自bfcache 对于重新加载的页面，会在load事件之后触发 对于bfcache中的页面，会在页面状态完全恢复的那一刻触发。 事件目标：document，但必须将事件处理程序添加到window上 event对象还包含了persisted属性，布尔值，被包含在bfcache中为true pagehide
在浏览器卸载页面的时候触发，在unload事件之前触发 事件目标：document，但必须将事件处理程序添加到window上 event对象还包含了persisted属性，布尔值，如果页面在卸载之后会被保存在bfcache中，则为true

hashchange事件

URL参数列表只要发生变化就会调用该事件 event对象额外包含两个属性
oldURL newURL

设备事件

orientationchange事件

只要用户改变了设备的查看模式，就会触发该事件（所有ios设备都支持） 移动safari的window.orientation属性可能包含3个值
0：肖像模式 90：向左旋转的横向模式 -90：向右旋转的横向模式 180：头朝下

MozOrientation事件

当设备的加速计检测到设备方向改变时，就会触发这个事件 只能提供一个平面的方向变化 event对象包含3个属性：x、y、z
值都介于1到-1之间，表示不同坐标轴上的方向 静止状态：x=y=0,z=1 向右倾斜：x减少 向左倾斜：x增加 远离用户倾斜：y减少 接近用户倾斜：y增大 移动设备：z减少

deviceorientation事件

也是在加速计检测到设备方向变化时在window对象上触发 该事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动 对象中包含每个轴相对于设备静止状态下发生变化的信息：5个属性
alpha：围绕z轴旋转，y轴的度数差（0-360的浮点数） beta：围绕x轴旋转，z轴的度数差（-180-180的浮点数） gamma：围绕y轴旋转，z轴的度数差（-90-90的浮点数） absolute：布尔值，表示设备是否返回一个绝对值 compassCalibrated：布尔值，表示设备的指南针是否校准过 通过这些信息，可以响应设备的方向，重新排列或修改屏幕上的元素

devicemotion事件

告诉开发人员设备什么时候移动，而不仅仅是设备方向如何改变。例如，可以检测设备是不是正在往下掉，或者是不是被走着的人拿在手里 包含4个属性

触摸与手势事件

触摸事件

用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。 触摸事件
touchstart：当手指触摸屏幕时触发 touchmove：当手指在屏幕上滑动时连续的触发 touchend：当手指从屏幕上移开时触发 touchcancel：当系统停止跟踪触摸时触发 上面的事件都冒泡，都可以取消 除了常见的DOM属性外，还包括3个用于跟踪触摸的属性
touches：表示当前跟踪的触摸操作的Touch对象的数组 targetTouches：特定于事件目标的Touch对象的数组 changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组 每个Touch对象包含下列属性：
clientX clientY identifier：表示触摸的唯一id pageX pageY screenX screenY target：触摸的DOM节点目标 在touchend事件发生时，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作；此时，就必须转而使用changeTouches集合 这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分 事件发生顺序：
touchstart->mouseover->mousemove(一次)->mousedown->mouseup->click->touched

手势事件

只有两个手指都触摸到事件的接收容器时才会触发这些事件 手势通常会改变显示项的大小，或者旋转显示项 3个手势事件
gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。 gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发 gestureend：当任何一个手指从屏幕上移开时触发 包含2个额外的属性
rotation：表示手指变化引起的旋转角度，负值为逆时针 scale：表示两个手指间距离的变化情况，值从1开始，拉大距离会增长</script>