事件

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

DOM0

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

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

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 码中对应小写字母或数字的编码相同。

ASCII对应表

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

textInput Event