js事件机制

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

1.事件三要素

事件目标（event target） 

  发生的事件与之相关联或与之相关的对象

事件处理程序（event handler）

  处理或相应事件的函数

事件对象（event object）    

  与特定事件相关且包含有关该事件详细信息的对象

2.事件流

DOM同时支持两种事件模型：捕获型事件和冒泡型事件
并且每当某一事件发生时，都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)

  事件捕获： document->html->body 

  处理目标： 事件处理

  事件冒泡： body->html->document

3.事件类型

load  元素加载完毕后触发，适用于window或者文件加载。       

unload  当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发。

select  当用户选择文本框（<input>,<textarea>）中的一个或多个字符时

change 当控件的值发生更改的时候触发

resize  当浏览器窗口被调整到一个新的高度或者宽度时，会触发

scroll  当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单

blur  元素失去焦点的时候触发

focus  元素获得焦点的时候触发，不支持冒泡 

//IE支持

focusin  与focus等价，支持冒泡

focusout  与blur等价，支持冒泡

click   点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件

dblclick  双击主鼠标按钮时触发

mousedown  任意鼠标按钮按下时触发

mouseup  释放鼠标按钮触发

mousemove  鼠标在元素内部移动的时候重发触发

mousewheel  滚轮事件

mouseenter  鼠标光标从元素外部首次移动到元素范围内激发，不冒泡。  【不支持子元素】

mouseleave  在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡【不支持子元素】

mouseover  鼠标位于元素外部，将其首次移入另一个元素边界之内时触发  【支持子元素】

mouseout    在位于元素上方的鼠标光标移入到另外一个元素中。【支持子元素】在被选元素上与mouseleave效果相同

keydown  按下键盘任意键时触发，如果按住不放会重复触发此事件

keypress  按下键盘字符键时触发，如果按住不放会重复触发此事件

keyup  释放键盘上键时触发

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