一，定义
在事件驱动程序设计中，需要注册不同事件的 处理方式。 在注册了事件的处理方式之后，浏览器就会在该事件发生时执行所注册的处理方式。所登录的处理 方式被称作事件处理程序、事件句柄或事件侦听器。对于Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下 键盘上某个键，等等。此外，读取页面或跳转至其他页面等行为也会引发事件。根据这些不同的用户操 作，浏览器会触发相应的事件。之后，执行事件处理程序，处理被触发的事件。
二，事件处理程序 / 事件侦听器的设定
对事件的处理方式被称为事件处理程序或事件侦听器，对事件处理进行设定的方式：
1.指定为 HTML 元素的属性（事件处理程序）
<input id="foo" type="button" value="foo" οnclick="alert('bar');alert('baz')"> | 事件处理程序名 | 触发的时机 |
|---|---|
| onclick | 鼠标点击操作 |
| ondblclick | 鼠标双击操作 |
| onmousedown | 按下了鼠标按键 |
| onmouseup | 放开了鼠标按键 |
| onmousemove | 鼠标指针在元素上方移动 |
| onmouseout | 鼠标指针从元素上方离开 |
| onmouseover | 鼠标指针移动至了元素上方 |
| onkeydown | 按下了键盘按键 |
| onkeypress | 按过了键盘按键 |
| onkeyup | 放开了键盘按键 |
| onchange | 更改了 input 元素的内容 |
| onblur | input 元素失去了焦点 |
| onfocus | input 元素获得了焦点 |
| onselect | 文本被选取 |
| onsubmit | 按下了表单的提交按钮 |
| onreset | 按下了表单的重置按钮 |
| onload | 载入完成 |
| onunload | 文档的载入被撤销（例如页面跳转等情况时） |
| onabort | 图像的读取被中断 |
| onerror | 图像读取过程中发生错误 |
| onresize | 窗口尺寸发生改变 |
如果事件处理程序返回了一个false 值，则会取消该事件的默认行为。
<script>
function stop(event) {
alert('Stop page transfer');
return false;
}
</script>
<a id="foo" href="http://example.com" οnclick="return stop();">example.com</a>
2.指定为 DOM 元素的属性（事件处理程序）
将事件处理程序指定为属性：
var btn = document.getElementById('foo');
function sayFoo() {
alert('foo');
}
btn.onclick = sayFoo; 3.通过 EventTarget.addEventListener() 进行值定（事件侦听器）
注册事件侦听器
var btn = document.getElementById('foo');
btn.addEventListener('click', function (e) {
alert('foo');
}, false); 可以通过addEventListener() 方法对某个特性元素的特定事件设定多个不同的事件侦听器。
var btn = document.getElementById('foo');
function sayFoo() {
alert('foo');
}
function sayBar() {
alert('bar');
}
function sayBaz() {
alert('baz');
}
btn.addEventListener('click', sayFoo, false);
btn.addEventListener('click', sayBar, false);
btn.addEventListener('click', sayBaz, false);
btn.addEventListener('click', sayFoo, false); // 根据规则，这次注册将被忽略
// 在点击按钮时，应该会以 foo、bar、baz 的顺序显示对话框
// 在 Firefox、Google Chrome 以及 Safari 中，将会以预想的情况执行
// 在 Opera 中则将会以 bar、baz、foo 的顺序执行。这是由于第二个 btn.addEventListener('click',sayFoo, false) 将会改变事件侦听器的注册顺序
将对象注册为事件侦听器
var btn = document.getElementById('foo');
var eventListener = {
message: 'This is an event listener object.',
handleEvent: function (e) {
alert(this.message);
}
};
btn.addEventListener('click', eventListener, false);
// 在点击按键时将会显示一个含有 'This is an event listener object.' 消息的对话框
三，事件的触发
事件的发生主要是由用户操作引起的。
四，事件的传播
事件的处理将会分别经过捕获阶段、目标阶段、事件冒泡阶段这 3 个阶段。
在捕获阶段中，事件将会从 Window 对象开始向下遍历 DOM 树来传播。 如果注册了事件侦听器，则会在捕获阶段执行相应的处理。
在目标阶段中，被事件目标注册的事件侦听器将会被执行。如果一个事件处理程序被指定为了 HTML 的标签属性，或被指定为了对象的属性，则会在这一阶段中被执行。
在事件冒泡阶段中，时间的传播方式为从事件目标开始向上遍历DOM 树，直至Window 对象结束。在 该树的节点中注册的事件侦听器将会在这时被执行。 不过，也有一些事件不会经过冒泡阶段。比如，click 事件为了确定需要涉及哪些元素而有必要在传 播事件的过程中遍历DOM 树，而 focus 事件则是一种只需处理当前元素的事件。这种情况下对focus 事 件进行传播是没有什么意义的，所以 focus 事件不会经过冒泡阶段。
通过在事件侦听器内执行Event.stopPropagation() 方法就能取消传播。不过stopPropagation() 方法只能取消执行在之后的侦听器目标中注册的事件侦听器，而在当前的侦听器目标中 设定的其他事件侦听器仍然会被执行。stopImmediatePropagation() 方 法与 stopPropagation() 方法不同，当前侦听器目标中设定的其他事件侦听器的执行也会被中止。此外，还能够通过 Event.preventDefault()方法来取消浏览器中默认实现的处理操作。
<a id="foo" href="http://example.com">example.com</a>
<script>
var link = document.getElementById('foo');
function sayFoo(event) {
alert('foo');
event.preventDefault();
}
link.addEventListener('click', sayFoo, false); // 由于使用了 preventDefault()，默认的行为将被取消，不会发生页面跳转
</script> 五，事件所具有的元素
在事件侦听器中可以根据发生的事件的类型或发生事件的节点来进行分支处理。
| 属性 | 说明 |
|---|---|
| type | 事件属性的名称。例如在设定事件侦听器时所用的click等名称 |
| target | 触发了事件的元素的一个引用。此即在本章中所说的事件目标 |
| currentTarget | 注册了现在正在执行处理的事件侦听器的元素。尽管与 target 属性有些相似，但两者是不同的。 在捕获阶段与事件冒泡阶段中执行的事件侦听器内，currentTarget 与 target 指向的是不同的节 点。此即侦听器目标 |
| eventPhase | 用于标识处于事件传播的哪一个阶段 |
| timeStamp | 事件的发生时间 |
| bubbles | 如果处于事件冒泡阶段则返回 true，否则返回 false |
| cancelable | 如果事件能够执行 preventDefault() 方法则返回 true，否则返回 false |
| 方法 | 说明 |
|---|---|
| stopPropagation() | 用于中止事件传播的方法 |
| preventDefault() | 用于中止默认行为的方法 |
| stopImmediatePropagation() | 用于中止其他事件侦听器的方法 |
六，标准事件
略
鼠标指针处于移动过程中的事件触发顺序
1. mousemove
2. mouseover
3. mouseenter
4. mousemove
5. mouseout
6. mouseleave
双击时的事件触发顺序
1. mousedown
2. mousemove（如有必要）
3. mouseup
4. click
5. mousemove（如有必要）
6. mousedown
7. mousemove（如有必要）
8. mouseup
9. click
10. dblclick
七，自定义事件
触发自定义的事件
var event = document.createEvent('Events');
event.initEvent('myevent', true, true);
var target = document.getElementById('foo');
target.addEventListener('myevent', function () {
alert('My event is fired.');
}, false);
target.dispatchEvent(event); 异步执行 dispatchEvent()
window.setTimeout(function () {
target.dispatchEvent(event);
}, 10); 