什么是事件对象?在触发DOM上的事件时都会产生一个对象
事件对象event
DOM中的事件对象
(1) type属性用于获取事件类型
(2) target属性用于获取事件目标
(3)stopPropagation()方法用于阻止时间冒泡
(4)preventDefault()方法阻止事件的默认行为
IE中的事件对象
(1)type属性用于获取事件类型
(2)srcElement属性用于获取事件的目标
(3)cancelBubble属性用于阻止时间冒泡
设置为true表示阻止冒泡;设置为false表示不阻止冒泡
(4)returnValue属性用于阻止事件的默认行为
设置为false表示阻止事件的默认行为
在代码的时候要注意考虑IE浏览器的兼容性,一般将一些常用行为封装起来
//跨浏览器的处理方法:封装在一个对象中
var eventUtil = {
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)//DOM2级事件处理
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);//IE浏览器事件处理
}else{
element['on'+type]=handler;//DOM0级事件处理
}
},
//删除句柄
removeHandler:function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)//DOM2级事件处理
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);//IE浏览器事件处理
}else{
element['on'+type]=handler;//DOM0级事件处理
}
},
getEvent:function(event){
return event?event:windows.event;
},
getType:function(event){
return event.type;
},
getElement: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;
}
}
}
网友评论