前端事件处理的四种方法

事件就是用户或浏览器自身执行的某种动作，比如CLICK，LOAD，MOUSEOVER等等，响应事件的函数就是事件处理函数。

1.事件处理可以直接在HTML级别写，<button onclick="somefunction()"  />这样就可以调用在页面其他地方定义的脚本，当然也可以直接在ONCLICK后面写函数。

事件处理程序的代码在执行时，有权访问全局作用域的任何代码。

这种方式下，首先会创建一个封装着元素属性值的函数，这个函数中有个局部变量EVENT，就是事件对象。

通过EVENT对象，可以访问事件对象。并且在这种方式下，THIS的值就等于事件的目标元素，这个例子中就是点击的BUTTON。

这个函数扩展作用域的方法是这样的：

function(){

    with(document){

      with(this){

        //元素属性值

    }

  }

}

2.事件处理也可以在DOM0级实现。

这是通过JS指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

每个元素，都有自己的事件处理程序属性，我们先获得元素，再设置它的事件处理程序即可。

这个时候的事件处理程序的作用域是元素的作用域，THIS就指向当前元素。

这种方式添加的函数会在事件的冒泡阶段被处理。

3.事件处理也可以在DOM2级实现。

DOM2级在DOM0级的基础上添加了更多的接口，用于事件处理的有两个方法，addEventListener()和removeEventListener()

所有DOM节点都包含这两个方法，接受三个参数，要处理的事件名，函数，和一个表示处理阶段的布尔值（TRUE表示在捕获阶段调用，FALSE表示在冒泡阶段调用）

eg: btn,addEventListener("click",funciton()'{},false);

这种方法的好处是可以添加多个函数。执行顺序就是添加的顺序：先添加先执行。

4.IE中实现了与DOM中类似的方法，attachEvent()和detachEvent(),添加的事件在冒泡阶段执行

但是这种方法下，THIS不指向元素，作用域变成全局作用域，THIS指向WINDOW了。

它的执行顺序也和DOM2级方法返回来，先添加后执行。

参考资料《JS高程》