JS事件（二）事件对象

html事件处理程序中，变量event中保存着事件对象

 

<button onclick="alert(ev.type)" id="btn">click</button>

1、DOM中的事件对象

无论是DOM0还是DOM2，事件处理程序中都会传入一个event对象

 

var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert(1);
    }
    btn.addEventListener("click",function(ev){
        alert(ev.type);
},false);

所有的事件都会有下表列出的成员：

在事件处理程序内部，对象this始终等于currentTarget的值，而target是事件实际目标

stopPropagation用于立即停止事件在DOM层中的传播：

var btn=document.getElementById("btn");
btn.onclick=function(event){
    alert("btn");
    event.stopPropagation();
}
document.body.onclick=function(event){
    alert("body");//不会执行
}

2、IE中的事件对象

访问IE中的event对象的方式取决于指定事件处理程序的方法

2.1、DOM0级：

IE8-浏览器不识别传入的event对象，需要在事件处理函数内部声明

 

var btn=document.getElementById("btn");
btn.onclick=function(event){
    alert(window.event.type);
}

 

IE9+浏览器以及其他高级浏览器则是两种方式都支持

2.2、attachEvent：

支持传入event参数

 

所有的事件都会有下表列出的成员：

this不一定指向目标元素，也可能指向全局（attachEvent），故用event.srcElement比较保险

兼容浏览器的事件处理对象：

 

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.detachEvent('on'+type,handler);
            }
            else{
                element['on'+type]=null;
            }
        },
    
        getEvent:function(event){
            return event ? event : window.event;
        },

        getTarget:function(event){
            return event.target || event.srcElement;
        },

        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }
            else{
                event.returnValue=false;
            }
        },

        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }
            else{
                event.cancelBubble=true;
            }
        }
        
    }