事件流

你有没有想过当我们点击页面上的按钮的同时我们也点击了整个页面，那么是谁先得到“鼠标点击”这个事件的哪？ 事件流就是用来描述页面接收事件的顺序。

还是上面的例子，如果是按钮先得到事件，那么就叫做事件冒泡，事件是从下到上传递的；如果是整个页面先得到，就叫事件捕获，时间由上到下传递。在事件传递过程中，如果遇到绑定了相同事件的DOM元素，事件就会立即触发。

obj.addEventListener("click", func, true); // 捕获方式
obj.addEventListener("click", func, false); // 冒泡方式（推荐）

现代浏览器这两种一般都支持，但是为了兼容老版本，所以我们一般都用事件冒泡。

DOM2级事件 为了统一两种不同的事件流，W3C对其进行了规范。 DOM2级事件规定的事件流分为三个阶段：捕获阶段，处于目标阶段，冒泡阶段。 现代浏览器在捕获阶段和冒泡阶段都会触发事件对象上的时间。

事件处理

事件就是用户或浏览器的动作，比如click、mouseover等，这些都是事件的名字。 事件处理程序的名字以“on”开头，所以click的事件处理程序就是onclick。 那么如何为事件指定事件处理方式哪？

1.HTML事件处理程序 没个元素支持的事件都有一个与之对应的HTML特性。

<input type="button" value="这是个按钮" onclick="showMessage()" /> //注意一些字符需要转义
function showMessage(){ alert('ok'); }

当然我们一般很少使用这种方式，首先，因为HTML是首先加载的，所以当HTML加载完成是js代码还没加载完，此时触发的事件就无法正常执行，而且这种方式对于后期维护也很麻烦。

2.DOM0级事件处理程序

var btn = document.getElementById("elm");
btn.onclick = function(){ alert('ok'); }
btn=null； //删除事件处理程序

使用DOM0方法指定的事件处理程序被认为是元素的方法，所以this指向的是当前绑定的元素，通过this我们能够访问元素的任何属性和方法。

3.DOM2级事件处理程序 其中的DOM2级事件定义了两个方法：addEventListener()和removeEventListener()，所有的DOM节点都包含这两个方法，它们接受三个参数：事件名，事件处理程序，布尔值（true表示捕获阶段调用，false表示冒泡阶段调用）。

var btn = document.getElementById("elm");
btn.addEventListener("click", function(){ alert('this.id'); }, false);
btn.addEventListener("click", function(){ alert('ok'); }, false);
//移除事件
//注意：如果之前绑定时使用的是匿名函数，那么将无法移除
btn.removeEventListener("click",必须函数名, false);

这里的事件处理程序同样是依附在元素的作用域中，所以this同样指向元素。在上面的例子中我们为按钮添加了两个事件处理程序，它们会按照添加是的顺序触发。