事件

JS与页面之间的交互是通过事件来实现的。事件就是浏览器发生一些特殊的交互瞬间,事件最早是用来分担服务器负载的一种手段，从早期的DOM0、DOM2到后期的DOM3事件。

• DOM0

DOM1事件的特点
- 直接绑定到html上的事件
- 给事件赋null，即可清除事件
- 绑定多个函数的情况下，后一个事件会覆盖前一个事件
- 不存在兼容性问题

• DOM2

DOM2事件的特点
- 通过 addEventListener(a,b,c) 绑定的事件,可以修改c的值来觉得该事件是否冒泡
- 可以同时存在多个函数，链式执行
- removeEventListener清楚事件

• DOM3

DOM3新增事件
UI事件
- load 页面加载完毕
- unload 卸载后触发
- abort 停止加载）
- error Js发生错误时触发
- select 文本框选择触发
- resize 页面窗口变化
- scroll 页面滚动式触发
焦点事件
- onfocus：获取焦点
- onblur：失去焦点
鼠标事件
- onmousedown 鼠标按下事件
- onmousemove 鼠标移动事件
- onmouseout 鼠标移出事件
- onmouseover 鼠标指针移动到元素（被选元素或其子元素）上时触发常与onmouseout一起用
- onmousenter 只有在鼠标指针穿过被选元素时，才会触发，常与onmouseleave一起使用
- onmouseleave 鼠标移出事件
- onmouseup 鼠标抬起事件
- onclick 单击事件（相继触发mousedown与mouseup事件）
- ondbclick 双击事件
滚轮事件
- onmousewheel 通常浏览器使用
- DOMMouseScroll FireFox浏览器使用
文本事件
当在文档中输入文本时触发
键盘事件
- keydown 按下键盘
- keypress 按住键盘
- keyup 松开键盘
合成事件
- compositionstart 开始输入
- compositionupdate 输入中
- compositionend 输入完成
变动事件（DOM发生变化时触发）
- DOMNodeInserted 一个节点被插入到另一个节点中
- DOMNodeRemoved 在节点从其父节点中被移除时
- DOMNodeInsertedIntoDocument 在一个节点被直接插入文档，或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发
- DOMNodeRemovedFromDocument 在一个节点被直接从文档中移除，或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发
- DOMSubtreeModified 在DOM结构中发生任何变化时触发
- DOMAttrModified 在特性被修改之后触发
- DOMCharacterDataModified 在文本节点的值发声变化时触发

• 其他

在移动设备由于上没有鼠标，所以在这些设备上开发比较不同。

面向Safari开发时的注意事项：

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

事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行

事件流

事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

• DOM事件流三个阶段的执行顺序

首先发生的事件捕获，然后是目标接受事件，最后是事件冒泡阶段

• 事件流概述

阻止冒泡
w3c的方法是e.stopPropagation()
IE则是使用e.cancelBubble = true
阻止默认事件
w3c的方法是e.preventDefault()
IE则是使用e.returnValue = false
事件的目标
e.target
事件处理程序当前正在处理事件的那个元素（始终等于this）
e.currentTarget

补充

在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性中会包含一个代码，与键盘上一 个特定的键对应。对数字字母字符键，keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。

DOM3新增textInput 事件，当用户在可编辑区域中输入字符时，就会触发这个事件。