javascript事件处理

1、DOM0级事件处理程序

通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性，这种为事件处理程序赋值的方式是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持，原因一是简单，二是具有跨浏览器的优势，要使用javascript指定事件处理程序，首先必须取得一个要操作的对象的引用。

每个元素(包括window和document)都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：

 //DOM0级事件处理程序
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        alert(this.id);
    };

在使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，此时的事件处理程序是在元素的作用域中运行，即程序中的this引用当前的元素。

也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null即可：btn.onclick=null;将时间处理程序设置为null之后，再单击按钮将不会有任何动作发生。

2、DOM2级事件处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener(),所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为时间处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

要为按钮上为click事件添加事件处理程序，可以使用下面代码：

var btn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

可以依次添加多个事件处理，处理程序会按照 添加的顺序触发。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。

注意：Firefox,Safari,Chrome和Opera支持DOM2级事件处理程序。

3、IE事件处理程序

在IE中实现了与DOM中类似的两个方法:attachEvent()和detachEvent(),这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数，由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

要使用attachEvent()为按钮添加一个事件处理程序，代码如下：

 var btn = document.getElementById("myBtn");
        //IE处理方式
     btn.attachEvent("onclick", function() {
            alert(btn.id);
        });

注意，attachEvent()的第一个参数是”onclick“,而非DOM的addEventListener()方法中的"click"。

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

var btn=document.getElementById("myBtn");

btn.attacheEvent("onclick",function(){

alert(this==window); //true

});

在多次使用attachEvent()可以添加多个不同的事件处理程序，不过，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。

4、跨浏览器的事件处理程序

代码如下：

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        else if (element.detachEvent) {
            element.detacheEvent("on" + type, handler);
        }
        else {
            element["on" + type] = null;
        }
    }
};