首页 > 代码库 > JavaScript高级程序设计42.pdf
JavaScript高级程序设计42.pdf
IE中的事件对象
要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在
wondow.event.type //IE中的type属性与DOM的type属性相同
在使用attachEvent()添加事件处理程序时,会有一个event对象作为参数被传入到事件处理程序函数中
btn.attachEvent("onclick",function(event){
alert(event.type); //"click"
});
通过HTML特性指定的事件处理程序,还可以通过event变量来访问event对象
<input type="button" value="http://www.mamicode.com/Click Me" onclick="alert(event.type)">
IE中的event对象同样包含于创建它的事件相关的属性和方法,与DOM一样,这些属性和方法也会因为事件类型的不同而不同,但所有的事件对象都包含下列属性和方法
cancelBubble 布尔值 读/写 默认为false,但将其设置为true就可以取消事件冒泡
returnValue 布尔值 读/写 默认为true,但将其设置为false就可以取消事件的默认行为
srcElement 元素 只读 事件的目标
type 字符串 只读 被触发的事件的类型
因为事件处理程序的作用域是根据指定它的方式来确定的,this不会始终等于事件目标,可以使用event.srcElement,比如
btn.onclick=function(){
alert(window.event.srcElement===this); //true
};
btn.attachEvent("onclick",function(event){
alert(event.srcElement===this); //false
});
取消默认行为(与DOM不同的是,没有方法确定事件能否被取消)
link.onclick=function(){
window.event.returnValue=http://www.mamicode.com/false;
};
取消事件冒泡,下面例子只显示一次警告框
btn.onclick=function(){
alert("Clicked");
window.event.cancelBubble=true;
};
document.body.onclick=function(){
alert("Body clicked");
};
跨浏览器的事件对象
var EventUtil={
addHandler:function(element,type,handler){
//省略的代码
},
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=http://www.mamicode.com/false;
}
},
removeHandler:function(element,type,handler){
//省略的代码
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
可以这样使用
event=EventUtil.getEvent(event); //取得event变量或者属性
EventUtil.stopPropagation(event); //传入event调用方法