事件处理程序

1.事件处理程序概念

       事件就是用户与浏览器交互后执行的某种动作，而响应某个事件的函数叫做事件处理程序(事件侦听器)

2.HTML事件处理程序

        某个元素支持的每种事件，都可以使用一个与之相应事件处理程序同名的                      
        HTML特性来指定，而这个特性的值使能够执行的Java script代码

    ;
    ;
    ;

缺点：

    时差问题
       用户可能会在HTML元素一出现在页面上就触发响应的事件，但当时的事件处理程序又可能尚不具备执行条件，就会引发错误

    拓展事件处理程序的作用域链在不同的浏览器中会导致不同结果，不同Java script 引擎遵守的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错

    HTML与Java script代码紧密耦合

3.DOM 0级事件处理程序
概念

    通过Java script指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性，这种方式是所有现代浏览器都支持的

优势

    简单
    具有跨浏览器的优势

缺陷

    只能绑定一次事件处理程序

给元素绑定事件(小写)

     element.onclick = function(){};

给元素解绑事件

     element.onclick = null;

4.DOM 2级事件处理程序

     DOM 2级事件定义了两个方法，用于处理绑定和删除事件处理程序的操作

绑定事件

    element.addEventListener(要处理的事件名，作为处理程序的函数，是否在捕获阶段调用事件处理程序)
    要处理的事件名
    'click'

    处理程序的函数
    function(){}

    是否在捕获阶段调用事件处理程序
    true：在捕获阶段调用事件处理程序
    false：在冒泡阶段调用事件处理程序

    可以多次绑定不同的事件处理程序，并且会按照他们的绑定顺序执行

解绑事件

    通过上面的方式绑定的事件只能使用removeEventListener()来移除
    移除的时候传入的参数与绑定处理程序时使用的参数需要相同，那么问题来了，你的处理程序函数是匿名函数将无法移除
    也就是说最好处理程序函数使用有名函数
    element.addEventListener('click',hander,false)
    element.removeEventListener('click',hander,false)

5.IE事件处理程序

    IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()

绑定事件

    ele.attachEvent(事件名，事件处理程序函数)
    事件名
    'onclick'

    事件处理程序的函数
    function(){}

    attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域
        在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行
        在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window

    attachEvent()也可以绑定多个事件处理程序函数
        但是在它得执行顺序与attachEventListener的执行顺序相反

解绑事件

    ele.detachEvent(事件名，事件处理程序函数)
        条件必须是提供相同的参数
        事件处理程序函数也必须是有名函数