事件冒泡与事件捕获
IE的事件流叫做事件冒泡(event bubbing)，即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。
所有现代的浏览器都支持事件冒泡，但在具体实现上还是有一定差别的。IE5.5及更早版本的事件冒泡会跳过<html>元素(从body直接到document)。IE9,Firefox,Chrome,Safari则将事件冒泡到window对象。
Netscape Communicator团队提出的另一种事件流叫做事件捕获(event capturing)。
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
事件处理程序
事件就是用户或浏览器自身的某种动作。诸如：click，load和mouseover等，都是事件的名字。而响应某个事件的函数叫做事件处理程序。事件处理程序以“on”开头，因此click的事件处理程序是onclick。为事件指定处理函数的方法有好几种，下面我们一一介绍。
HTML事件处理程序：
<a href="javascript:void(0);" onclick="showMessage()">百度</a>
缺点有二：
1.时差问题，用户可能会在已进入页面时，就点击元素，这时函数还可能未被完全加载。这时就会引发错误。为此，很多HTML事件处理程序都会被封装在一个try-catch块内，以便错误不会付出水面。
<a href="javascript:void(0);" onclick="try { showMessage('腾讯') }catch{ }">腾讯</a>
2.让HTML和JavaScript紧密耦合，如果要更换事件处理函数，就要改动两个地方：HTML和JavaScript，而这正是许多开发人员摒弃HTML事件处理函数的原因。
DOM0级事件处理程序：
通过将一个函数赋值给一个事件处理程序属性。它具有简单，并具有跨浏览器的优势。
例如：
var but = document.getElementById("ButtonValid");
but.onclick = function () {
console.log(this);
}
删除这个DOM0级别的方法指定的事件处理函数，只要将null赋值给这个属性即可。
but.onclick = null;
DOM2级事件处理程序：
“DOM2级事件”定义了两个方法来用于指定和删除事件处理程序：addEventListener()和removeEventListener()。所有的DOM节点都包含这两个方法，并且它们接收3个参数：事件名（例如：click，load等），函数，bool（true表示是在捕获阶段调用事件处理函数，false表示在冒泡阶段调用事件处理函数）。
var but2 = document.getElementById("ButtonDOM2");
//1.添加一个匿名函数
but2.addEventListener("click", function () {
console.log(this);
}, false);
调用removeEventListener()移除时，有一点需要注意，那就是函数不能是匿名函数，并且参数相同。
使用DOM2级别事件处理函数的好处是：可以添加多个事件处理函数
支持的浏览器：IE9+，Firefox，Chrome，Opera，Safari
IE事件处理程序：
IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。这两个方法都接受两个参数：事件名称和函数。默认为冒泡阶段触发。