首先了解一下什么是事件？事件是web浏览器通知应用程序发生了什么事情。我们可以通过一些方式注册事件用来监听一些我们需要处理的事件。事件包含一下一些属性：
事件类型：用来说明是什么类型事件的字符串
事件处理程序：监听了某个事件想让他做的事情
事件对象：特定的事件类型，有不同的属性
事件传播：一般情况下是会经历捕获->目标对象->冒泡的过程，IE8之前的浏览器不支持事件捕获
下面简单介绍一下事件有哪些类型，文档加载和准备就绪事件、鼠标事件、鼠标滚轮事件、拖放事件、键盘事件和文本输入事件。随着web平台的发展，事件集合越来越大，这些新的事件主要来自：html5规范和移动设备的触摸和手势事件。
介绍了事件有哪些类型之后，接着我们聊聊注册事件处理程序。我们知道注册事件处理程序有两种基本方式：第一种出现在web初期，给事件目标对象或文档元素设置属性（0级事件模型）；第二种方式是将事件处理程序传递给对象或者是元素（2级事件模型）。
0级事件模型：
|
1
2
3
4
5
6
7
|
//直接写在属性里 <button id="btn"
onclick="alert(‘click me‘)">clicke me</button>
//通过JS绑定到元素上
document.getElementById(‘btn‘).onclick = function() {
alert(‘click me‘);
}
|
|
1
|
2级事件模型 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
clickHandler = function
() {
alert(‘click me‘);
}
//非IE浏览器
/* 参数说明：第一个参数是事件类型，第二个参数是处理程序，第三个参数是是否在捕获阶段执行
阻止事件传播：Event.stopPropagation();
阻止默认事件：Event.preventDefault();
*/
document.getElementById(‘btn‘).addEventListener(‘click‘, clickHandler, false
); //注册
document.getElementById(‘btn‘).removeEventListener(‘click‘, clickHandler, false
); //清除
//IE浏览器
/*
参数说明：第一个参数是事件类型，第二个参数是处理程序；由于IE不支持捕获，所以没有第三个参数
阻止事件传播：window.event.cancleBuble();
阻止默认事件：window.event.returnValue = false;
*/
document.getElementById(‘btn‘).attachEvent(‘onclick‘, clickHandler); //注册
document.getElementById(‘btn‘).detachEvent(‘onclick‘, clickHandler); //解除
|
注：
1.虽然所有的事件都受事件传播的捕获阶段的支配但并非所有事件都冒泡；一般来说原始输入事件冒泡，高级语义事件不冒泡（blur、focus）
2.addEventListener注册的事件是由顺序的，attachEvent无顺序
利用event.target和冒泡可以实现事件代理。