一、事件基础
1、事件模型
在浏览器的发展历史中，出现4种事件处理模型
基本事件模型，DOM事件模型，IE事件模型，netscape事件模型
2、事件流
冒泡型，捕获型，混合型
3、绑定事件
在基本事件模型中，JavaScript支持两种绑定方式：；静态绑定和动态绑定
4、事件处理函数
事件处理函数是一类特殊的函数，与函数直接量结构相同，为异步调用。
5、注册事件
在DOM事件模型中，通过调用对象的addEventListener
element.addEventListener(String type, Function listener, boolean useCapture);
type：注册事件的类型名。事件类型和事件属性不同，事件类型名没有on前缀。
listener：监听函数，即事件处理函数。默认唯一参数是event对象
useCapture：是一个布尔值。true为事件传播的捕获阶段触发，false为冒泡阶段触发。
IE事件模型使用attachEvent()方法注册事件
element.attachEvent(etype,eventName)
6、销毁事件
element.removeEventListener(String type,Function listener,boolean useCapture)只能删除addEventListener()方法注册的事件
IE事件模型使用detachEvent()方法注销事件
7、使用event对象
event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。
8、事件委托
把目标节点的事件绑定到祖先节点上。能优化代码，提升运行性能，真正把HTML和JavaScript分离
二、使用鼠标事件
鼠标事件类型说明如下：
| 事件类型 | 说明 |
|---|---|
| click | 单击鼠标左键时发生 |
| dblclick | 双击鼠标左键时发生 |
| mousedown | 单机任意一个鼠标按钮时发生 |
| mouseout | 鼠标指针位于某个元素上，且将要移除元素的边界时发生 |
| mouseover | 鼠标指针移出某个元，到另一个元素上时发生 |
| mouseup | 松开任意一个鼠标按钮时发生 |
| mousemove | 鼠标在某个元素上时持续发生 |
1、鼠标点击
鼠标点击事件包括4个：click、dblclick、mousedown和mouseup。而mousedown和mouseup事件类型多用在鼠标拖放、拉伸操作中（配合mousemove）。当这些事件处理函数返回值为false时，则会禁止绑定对象的默认行为
2、鼠标移动
mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一像素），就会触发mousemove事件。
3、鼠标经过
鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件；而当把鼠标指针移出某个元素时，将触发mouseout事件。
4、鼠标来源
当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果在IE事件模型中实现相同的目标，可以使用srcElement属性。
5、鼠标定位
当事件发生时，获取鼠标的位置是很重要的事情。，不同浏览器分别在各自事件对象中定义了不同的属性
| 属性 | 说明 | 兼容性 |
|---|---|---|
| clientX | 以浏览器窗口左上顶角为原点，定位x坐标 | 所有浏览器，不兼容Safari |
| clientY | 以浏览器窗口左上顶角为原点，定位y坐标 | 所有浏览器，不兼容Safari |
| offsetX | 以当前事件的目标对象左上顶角为原点，定位x坐标 | 所有浏览器，不兼容Mozilla |
| offsetY | 以当前事件的目标对象左上顶角为原点，定位y坐标 | 所有浏览器，不兼容Mozilla |
| pageX | 以document对象（即文档窗口）左上角为原点 | 所有浏览器，不兼容IE |
| pageY | 以document对象（即文档窗口）左上角为原点 | 所有浏览器，不兼容IE |
| screenX | 计算机屏幕左上角为原点 | 所有浏览器 |
| screenY | 计算机屏幕左上角为原点 | 所有浏览器 |
| layerX | 最近的绝对定位的父元素左上角为原点 | Mozilla和Safari |
| layerY | 最近的绝对定位的父元素左上角为原点 | Mozilla和Safari |
ps：可用浏览器窗口document.documentElement和document.body对象的scrollLeft和scrollRight属性值帮助定位
6、鼠标按键
通过事件对象的button属性可以获取当前鼠标按下的键，该属性可用于click、mousedown、mouseup事件类型。
| 单击 | IE事件模型 | DOM事件模型 |
|---|---|---|
| 左键 | 1 | 0 |
| 右键 | 2 | 2 |
| 中键 | 4 | 1 |
当鼠标点击事件发生时，触发事件顺序：
mousedown->mouseup->click->mousedown->mouseup->click->dblclick
三、使用键盘事件
键盘事件主要包括以下3种类型：
keydown：在键盘下按下某个键时触发。如果按住某个键会不断触发，但Opera不支持这种连续操作。
keypress：按下某个键并释放时触发。如果按住某个键会不断触发
keyup：释放某个键时触发。该事件仅在松开键盘时触发一次，不是一个连续的响应状态
键盘事件属性（包括keyCode、charCode、target、srcElement、shiftKey、ctrlKey、altKey、metaKey）
属性值及说明（略）
四、使用页面事件
1、页面初始化
load事件类型在页面完全加载完毕的时候触发。该事件包括所有的图形图像、外部文件（如CSS、JS文件等）的加载。为window对象绑定load事件类型的方法有两种：
1)window.onload=f;
2)<body onload="f()">
2、结构初始化
使用DOMContentLoaded事件类型，它是在Dom文档结构加载完毕的时候触发的。（IE和Safari不支持）
3、页面卸载
unload（无法有效阻止默认行为，留有时间很短）
beforeunload（会提示是否离开当前窗口）
4、窗口重置
使用resize事件可在用户调整窗口大小时触发。
5、页面滚动
scroll事件类型用于在浏览器窗口内移动文档的位置时触发。
box.style.left=100+parseInt(document.body.scrollLeft);
6、错误处理
error事件类型是在JS代码发生错误时触发的，无需传递事件对象。默认三个参数，分别为错误信息、出错文件的URL和文件中错误位置的行号
五、使用UI事件
1、焦点处理
主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。
1）focus：当点击或使用Tab键切换到某个表单元素或超链接对象时触发。默认情况下，整个文档处于焦点状态。
2）blur：元素失去焦点时响应，主要用于表单元素和超链接对象。
2、选择文本
当在文本框或文本区域内选择文本时，将触发select事件
3、字段值变化检测
change事件类型是在表单元素的值发生变化时触发，它主要用于input、select和textarea元素。对于input和textarea来说，当它们失去焦点且value值改变时触发；对于select元素，在其选项改变时触发。
4、提交表单
使用<input>和<button>标签都可以定义提交按钮，只要将type属性设置为“submit”即可，而图像按钮则是通过<input>的type属性值设置为”image”。当单击提交按钮或图像按钮时，就会提交表单。
5、重置表单
<input type="reset" value="重置按钮">
<button type="reset">重置按钮</button>
当单击重置按钮时，表单将被重置，所有表单字段恢复初始值。这时触发reset事件。
6、剪贴板数据
H5规范了剪贴板数据操作，主要包括6个剪贴板事件
beforecopy、copy、beforecut、cut、beforepaste、paste
使用clipboardData对象可以访问剪贴板中的数据，包含两个方法：getData()和setData()。
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
