事件及事件对象（一）

JavaScript中的事件处理根据标准和浏览器的兼容程度共有三种方式：

DOM0级处理方式，如下

1 var oBtn = document.getElementById('btn');
2 oBtn.onclick = function(){
3    alert('你好');     
4 };

这种方式不存在兼容问题，但缺点是一次只能绑定一个处理程序，而且后绑定的会覆盖先绑定的。对应的解除事件处理程序的方法如下：

```
1 oBtn.onclick = null;
```
DOM2级处理方式，如下
```
1 oBtn.addEventListener('click',function(){
2     alert('你好');
3 },false);
```
第一个参数是事件类型，注意这里没有'on'；第二个参数是事件处理程序；第三个参数如果为true则在捕获阶段执行函数，如果为false，则在冒泡阶段执行函数，如果没有特殊要求都为false。需要牢记的是在使用该方式的时候处理函数必须是命名函数，因为这样在解除绑定时才能有效，否则看似一样的函数实际是两个对象，你绑定了对象1，然后再解除对象2，那么是无法解除对象1的：

function handler(){
  alert('你好');  
}

oBtn.addEventListener('click',handler,false);
oBtn.removeEventListener('click',handler,false);

　　这种方式可以同时对元素绑定多个处理程序而不会相互覆盖：

function handler(){
  alert('你好');  
}

function handler2(){
    alert('hello');
}
oBtn.addEventListener('click',handler,false);
oBtn.addEventListener('click',handler2,false);

　　这里为oBtn先后绑定了handler和handler2两个点击事件的处理程序，当点击鼠标后，会先弹出‘你好’，再弹出‘hello’，这是根据绑定的先后顺序决定的。

IE事件处理程序
```
function handler(){
    alert('你好');
}
oBtn.attachEvent('onclick',handler);
```
这里与DOM2级不同的是只有两个参数，并且第一个参数必须加'on'，没有第三个参数的原因是IE没有捕获阶段；同样的，处理程序必须是匿名函数，这样解除绑定才有效：

function handler(){
    alert('你好');
}
oBtn.attachEvent('onclick',handler);
oBtn.detachEvent('onclick',handler);

IE事件处理的方式也可以为一个DOM元素同时绑定多个事件处理函数：

function handler(){
  alert('你好');  
}

function handler2(){
    alert('hello');
}
oBtn.attachEventListener('click',handler);
oBtn.attachEventListener('click',handler2);

与DOM2不同的是当点击按钮时，会先弹出‘hello’，再弹出‘你好’，顺序正好相反。

下面写一个包含兼容各个浏览器的事件绑定程序和解除程序的对象：

var EventUtil = {
    addEvent:function(ele,type,handler){
        if(ele.addEventListener){
            ele.addEventListener(type,handler,false);
        }else if(ele.attachEvent){
            ele.attachEvent('on'+type,handler);
        }else{
            ele['on'+type] = handler;
        }
　　 },
    removeEvent:function(ele,type,handler){
        if(ele.removeEventListener){
            ele.removeEventListener(type,handler,false);
        }else if(ele.detachEvent){
　　         ele.detachEvent('on'+type,handler);
        }else{
             ele['on'+type] = null;
        }
    }
};

秒客网

事件及事件对象（一）

相关文章