Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序

事件处理程序

事件处理程序即响应某个事件的函数

事件处理程序以 “on” 开头

如“onclick”，“onload”

HTML事件处理程序

某个元素支持的每种事件都可以使用一个与响应的事件处理程序同名的HTML特性来指定

这个特性的值应该是能够执行的script代码

如：

<input type="button" value="click me" onclick="alert('clicked')"/>

此外也可以直接调用在文档其它部分定义的函数作为事件处理程序所执行的代码

如：

<input type="button" value="click me" onclick="functionClick()"/>

以这样的方式指定事件处理程序会创建一个封装着元素属性值的函数

该函数有一个局部变量 event （事件对象），通过event变量可以访问事件对象

并且在这个函数内部，this指向事件的目标元素

此外，这个动态创建的函数内部可以像访问局部变量一样访问document以及该元素本身的成员

这是因为HTML指定的事件处理函数会像下面这样拓展函数作用域

function(){
    with(document){
        with(this){
            //元素属性值
        }
    }
}

这样的目的无非是为了让事件处理程序无需引用表单元素就能访问其它表单字段

但是这种方式有以下缺点：

1. 存在时差问题，即触发事件时事件处理程序可能并不具备执行条件
2. 这样拓展的事件处理程序作用域链在不同的浏览器可能会导致不同的结果
3. HTML与JS代码的紧密耦合，使代码的维护成本增加

DOM0级事件处理程序

通过JS指定事件处理程序的传统方式是在第四代web浏览器出现的，只需要将一个函数赋值给事件处理程序属性即可

这种方式一直沿用至今，因为这种方法非常简单并且具备跨浏览器优势

如下所示：

var btn = document.getElementByTagName("button")[0];
btn.onclick = function(){
    alert("clicked");
}

使用DOM0级方法指定的事件处理程序被认为是元素方法

因为事件处理程序运行在元素作用域中，所以this引用当前元素

以这种方式定义的事件处理程序会在事件流的冒泡阶段被处理

如果需要删除事件处理程序，只需要将事件处理程序属性的值设为 null 即可

btn.onclick = null;

DOM2级事件处理程序

“DOM级事件”定义了两个方法用于指定和删除事件处理程序

1. addEventListener（）指定事件处理函数
2. removeEventListener（）移除事件处理函数

上面两个方法都接收三个参数

1. 要处理的事件名
2. 作为事件处理程序的函数
3. 布尔值 true 表示在捕获阶段调用事件处理程序  false在冒泡阶段调用事件处理程序

与DOM0级一样DOM2级也是在元素作用域中执行

与DOM0最大的区别在于，DOM2级可以为一个元素添同一事件加多个事件处理程序，而DOM0级重复设置后面的事件处理程序将会覆盖前面的事件处理程序

DOM2级同一元素的同一事件的事件处理程序被事件触发时会按照添加顺序执行

由 addEventListener（）添加的事件只能由 removeEventListener（）移除

这也意味着，如果addEventListener添加了匿名函数作为事件处理程序将无法被移除

PS.一般来说为了最大限度地保证浏览器兼容，会把事件注册在事件冒泡阶段

IE事件处理程序

IE实现了与DOM中类似地两个方法：

1. attachEvent（）
2. detachEvent（）

这两个方法接收相同的两个参数

1. 事件名称
2. 事件处理程序函数

由于低版本IE只支持冒泡，所以这两个方法会将事件处理程序添加到冒泡阶段

这里要注意的是：

1. 事件名称与DOM不一致列如click事件 addEventListener 使用 “click” 而 attachEvent使用“onclick”
2. 作用域不同，attachEvent事件添加的函数作用域为全局作用域，所以this等于 window
3. 多个事件执行顺序不同 与DOM2级相反即与添加事件的顺序相反

跨浏览器事件处理程序

为了隔离浏览器差异，我们可能会使用一些JS库来完成跨浏览器的事件处理程序的兼容

当然我们也可以自己实现

大体实现如下：

// 跨平台事件绑定 参数 1.目标元素 2.目标事件 3.事件处理函数
function addEvent(ele,eve,fun) {
        if(ele.addEventListener){
            ele.addEventListener(eve,fun,false);
        }else if(ele.attachEvent){
            ele.attachEvent.call(ele,"on"+eve,fun,false);
        }else{
            ele["on"+eve] = fun;
        }
}
 // 跨平台事件移除
function removeEvent(ele,eve,fun) {
        if(ele.removeEventListener){
            ele.removeEventListener(eve,fun,false);
        }else if(ele.detachEvent){
            ele.detachEvent.call(ele,"on"+eve,fun,false);
        }else{
            ele["on"+eve] = null;
        }
    }