事件处理程序（或者事件侦听器）

事件处理程序

事件处理程序简介：

事件是指一些特定的交互瞬间，而事件处理程序是指这些交互的瞬间将要出发的方法（即处理程序），在js中事件（或事件名）有click，mouseover，keydown等它们前面没有on，而事件处理程序（侦听器）则是在事件名前面加上on，在js中为事件添加事件处理程序有多种方法，下面将详细的进行讲解。

function alertThis(){

   alert(this);

}

html的事件处理程序：

例：<input type="button" value="click me" onclick="alertThis();" />

这种形式的写法便是html形式的事件处理程序，很容易发现这种写法的缺点，事件和html元素绑定得太死了，耦合性太高了，违背了不唐突的js原则，还提一点这种写法需要注意的事项，执行方法中的this对象指向的是全局的window对象，这个很好理解，因为最后是window启动了这个方法（不详细说明了，了解js的内部原理就能很快的理解）

dom0级的事件处理程序：

例：<input id="cmt" type="button" value="click me too" />

document.getElementByID("cmt").onclick = alertThis; //切记这里的方法只需要写上方法名，如果后面加上括号，那复值得便是方法执行后的结果

这种形式的事件处理程序添加方法是传统方法，至今仍在运用，而且所有的浏览器都支持，这是其优点之一，也是最大的优点（为此在项目中很多情况下都是用这种方法，或者运用自己封装的方法加载）。其第二个优点就是耦合性低。方法中的this对象指向的是元素本身。

dom2级事件处理程序：

dom2级也即所谓的标准形式（由w3c制定的标准），虽然是标准形式，但是主流的ie没有实现这个标准，而是自己写了一套不同的实现。它的核心则是addEventListener(one,two,three)添加事件处理程序;removeEventListener(one,two,three);删除事件处理程序，这两个方法的参数要一模一样删除方法才能生效。第一个参数是指事件的名称如：click(ie中则需要加上on)，第二个参数则是要执行的方法名，如：alertThis,第三个参数是指定事件流用的如果是true则运用事件捕获流，如果是false则运用的是事件冒泡流（ie没有这个参数，因为它只支持事件的冒泡流）。

例：document.getElementById("cmt").addEventListener("click",alertThis,false);

document.getElementById("cmt").removeEventListener("click",alertThis,false);

特别注意：ie不支持这种写法,方法中的this对象指向的是元素本身

优点：相比dom0级它能够为一个元素的一个事件添加多个处理程序。

dome2级ie的实现：

例：attachEvent("onclick",alertThis);detachEvent("onclick",alertThis);

此种写法与标准的几点不同的地方，一：this对象指向的是window对象；二：第一个参数需要加上on；三：当为一个事件添加多个处理程序时，ie是从后往前执行，而标准形式则是从前往后执行。

项目经验：dom0级是我们项目组中运用得最多的一种写法，但是如果自己封装类库时可以使用dom2级进行兼容性的检验即可。