目录
事件处理是对象化编程的一个重要环节，它可以是程序的逻辑结构更加清晰，使程序更有灵活性，提高了程序的开发效率。事件处理过程分为三步：1.发生事件，2启动时间处理程序，3,事件处理程序作出反应
1 事件与事件名称
事件是一些可以通过脚本响应的页面动作。当用户按下鼠标键或者提交一个表单，甚至在页面上移动鼠标是，事件就会出现。事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件关联。绝大多数事件的命名都是描述的，很容易理解。通常，事件处理器的命名原则是，在事件名称前加上前缀on
2 JavaScript常用事件
| 事件 | 说明 | |
| 鼠标 键盘 事件 |
onclick | 鼠标单击时触发此事件 |
| ondblclick | 鼠标双击时触发此事件 | |
| onmousedown | 按下鼠标时触发此事件 | |
| onmouseup | 鼠标按下后松开鼠标时触发此事件 | |
| onmouseover | 当鼠标移动到某对象范围的上方时触发此事件 | |
| onmousemove | 鼠标移动时触发此事件 | |
| onmouseout | 当鼠标离开某对象范围时触发此事件 | |
| onkeypress | 当键盘上的某个键被按下并且释放时触发此事件 | |
| onkeydown | 当键盘上的某个按键被按下时触发此事件 | |
| onkeyup | 当键盘上的某个按键被按下后松开时触发此事件 | |
| 页面 相关 事件 |
onabort | 图片在下载时被用户中断时触发此事件 |
| onbeforeunload | 当前页面的内容将要被改变时触发此事件 | |
| onerror | 出现错误时触发此事件 | |
| onload | 页面内容完成时触发此事件（也就是页面加载事件） | |
| onresize | 当浏览器的窗口大小被改变时触发此事件 | |
| onunload | 当前页面将被改变时触发此事件 | |
| 表单 相关 事件 |
onblur | 当前元素失去焦点时触发此事件 |
| onchange | 当前元素失去焦点并且元素内容发生改变时触发此事件 | |
| onfocus | 当某个元素获得焦点时触发此事件 | |
| onreset | 当表单中RESET的属性被激活时触发此事件 | |
| onsubmit | 一个表单被提交时触发此事件 | |
| 滚动 字幕 事件 |
onbounce | 在Marquee内的内容移动至Marquee显示范围之外时触发此事件 |
| onfinish | 当Marquee元素完成需要显示的内容后触发此事件 | |
| onstart | 当Marquee元素开始显示内容时触发此事件 | |
| 编辑 事件 |
onbeforecopy | 当页面当前被选择内容将要复制到浏览者系统的剪贴板前触发此事件 |
| onbeforecut | 当页面中的一部分或全部内容将要被剪切到浏览者系统剪贴板时触发此事件 | |
| onbeforeeditfocus | 当前元素将要进入编辑状态时触发此事件 | |
| onbeforepaste | 将内容要从浏览者的系统剪贴板中粘贴到页面上时触发此事件 | |
| onbeforeupdate | 当浏览者粘贴系统剪贴板中的内容时通知目标对象 | |
| oncontextmenu | 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发此事件 | |
| oncopy | 当页面当前的被选择内容被复制后触发此事件 | |
| oncut | 当页面当前的被选择内容被剪贴时触发此事件 | |
| ondrag | 当某个对象被拖动时触发此事件（活动事件） | |
| ondragend | 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放时 | |
| ondragenter | 当对象被鼠标拖动进入其容器范围内时触发此事件 | |
| ondragleave | 当对象被鼠标拖动的对象离开其容器范围内时触发此事件 | |
| ondragover | 当被拖动的对象在另一对象容器范围内拖动时触发此事件 | |
| ondragstart | 当某对象被拖动时触发此事件 | |
| ondrop | 在一个拖动过程中，释放鼠标键时触发此事件 | |
| onlosecapture | 当元素失去鼠标移动所形成的选择焦点时触发此事件 | |
| onpaste | 当内容粘贴时触发此事件 | |
| onselect | 当文本内容被选择时触发此事件 | |
| onselectstart | 当文本内容的选择将开始发生时触发此事件 | |
| 数据 绑定 事件 |
onafterupdate | 当数据完成由数据源到对象的传送时触发此事件 |
| oncellchange | 当数据来源发生变化时触发此事件 | |
| ondataavailable | 当数据接受完成时触发此事件 | |
| ondatasetchange | 数据在数据源发生变化时触发此事件 | |
| ondatasetcomplete | 当数据源的全部有效数据读取完毕时触发此事件 | |
| onerrorupdate | 当使用onbeforeupdate事件触发取消了数据传送时，代替onafterupdate事件 | |
| onrowenter | 当前数据源的数据发生变化并且有新的有效数据时触发此事件 | |
| onrowexit | 当前数据源的数据将要发生变化时触发此事件 | |
| onrowsdelete | 当前数据记录将被删除时触发此事件 | |
| onrowsinserted | 当前数据源将要插入新数据记录时触发此事件 | |
| 外部 事件 |
onafterprint | 当文档被打印后触发此事件 |
| onbeforeprint | 当文档即将打印时触发此事件 | |
| onfilterchange | 当某个对象的滤镜效果发生变化时触发此事件 | |
| onhelp | 当浏览者按下F1键或者单击浏览器的帮助菜单时触发此事件 | |
| onpropertychange | 当对象的属性之一发生变化时触发此事件 | |
| onreadystatechange | 当对象的初始化属性值发生变化时触发此事件 |
3 事件处理程序的调用
3.1 在JavaScript中
<input id ="save" name="bt_save" type="button" value="保存">
<script>
var b_save=document.getElemetnById("save");
b_save.onclick=function(){
alert("单击了保存按钮");
}
</script>或者如下：
<form id="form1" name="form1" method="post" action="">
<input id ="save" name="bt_save" type="button" value="保存">
</form>
<script>
form1.save.onclick=function(){
alert("单击了保存按钮");
}
</script>注意：JavaScript中指定事件处理程序时，事件名称必须小写，才能正确响应事件
3.2 在HTML中
在HTML中分配事件处理程序，只需要在HTML标记中添加相应事件，并在其中指定要执行的代码或者函数名即可。
<input name="bt_save" type="button" value="保存" onclick="alert('单击了保存按钮');" >
4 DOM事件流程图
由图可知捕获过程要先于冒泡过程
冒泡型事件（bubbling）：从dom树形结构上理解，就是事件由叶子节点沿祖先节点一直向上传递直到根节点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素。
捕获型事件（capturing）：netscape navigator 的实现，它与冒泡型刚好相关，有dom树最顶层元素一直到最精确的元素
DOM标准按时间模型：因为两个不同的模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是他们两者的结合体，它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字任然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象
5 键盘上数字和数字键的键码值
注意：键码值只有在文本矿中才完全有效
5.1字母和数字键的键码值
| 按键 | 键值 | 按键 | 键值 | 按键 | 键值 | 按键 | 键值 |
| A(a) | 65 | J(j) | 74 | S(s) | 83 | 1 | 49 |
| B(b) | 66 | K(k) | 75 | T(t) | 84 | 2 | 50 |
| C(c) | 67 | L(l) | 76 | U(u) | 85 | 3 | 51 |
| D(d) | 68 | M(m) | 77 | V(v) | 86 | 4 | 52 |
| E(e) | 69 | N(n) | 78 | W(w) | 87 | 5 | 53 |
| F(f) | 70 | O(o) | 79 | X(x) | 88 | 6 | 54 |
| G(g) | 71 | P(p) | 80 | Y(y) | 89 | 7 | 55 |
| H(h) | 72 | Q(q) | 81 | Z(z) | 90 | 8 | 56 |
| I(i) | 73 | R(r) | 82 | 0 | 48 | 9 | 57 |
5.2 数字键盘上按键的键码值
| 按键 | 键值 | 按键 | 键值 | 按键 | 键值 | 按键 | 键值 |
| 0 | 96 | 8 | 104 | F1 | 112 | F9 | 120 |
| 1 | 97 | 9 | 105 | F2 | 113 | F10 | 121 |
| 2 | 98 | * | 106 | F3 | 114 | F11 | 122 |
| 3 | 99 | + | 107 | F4 | 115 | F12 | 123 |
| 4 | 100 | Enter | 108 | F5 | 116 | ||
| 5 | 101 | — | 109 | F6 | 117 | ||
| 6 | 102 | . | 110 | F7 | 118 | ||
| 7 | 103 | / | 111 | F8 | 119 |
5.3 控制键的键码值
| 按键 | 键值 | 按键 | 键值 | 按键 | 键值 | 按键 | 键值 |
| BackSpace | 8 | Esc | 27 | Right Arrow(—>) | 39 | -_ | 189 |
| Tab | 9 | Spacebar | 32 | Down Arrow(\|/) | 40 | .> | 190 |
| Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
| Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
| Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
| Control | 17 | Home | 36 | ; : | 186 | \| | 220 |
| Alt | 18 | Left Arrow() | 37 | =+ | 187 | ]} | 221 |
| Cape Lock | 20 | Up Arrow() | 38 | ,< | 188 | ' " | 222 |