提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

跨浏览器的事件对象介绍

事件浏览器对象 介绍
2023-06-13 09:14:34 时间
复制代码代码如下:

vareventUtil={
getEvent:function(event){
returnevent?event:window.event;
};
getTarget:function(event){
returnevent.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;
}
};
};

　　当使用一个DOM兼容的浏览器时，event变量仅仅是传入并被返回，在IE中event参数将是undefined，因此window.event将会被返回，所以采用eventUtil.getEvent()方法无论在dom还是IE上event返回值都是可用的。
　　同理第二个方法，getTarge()方法，先检测event对象的target属性，如果存在，则返回targe，若为IE浏览器则返回srcElement属性。保证兼容性。
复制代码代码如下:

btn.onclick=function(event){
event=EventUtil.getEvent(event);
vartarget=EventUtil.getTarget(event);
};

　　第三个方法，preventDefault()方法，当event对象传入时，先检测event对象的preventDefault()方法是否可用，若可用则调用preventDefault方法，若不可用将event的returnValue设置为false。
　　例如：
　　
复制代码代码如下:
varlink=document.getElementById("myLink");
link.onclick=function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
};

　　这段代码阻止了一个link标签的默认行为，event对象来自于EventUtil的getEvent方法的返回值并作为preventDefault()方法的传入参数。
　　第四个方法stopPropagation(),用同样的方法，首先尝试DOM方法，之后尝试cancelBubble属性，例如下面的代码：
复制代码代码如下:
varbtn=document.getElementById("myBtn");
btn.onclick=function(event){
alert("Clicked");
event=EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick=function(event){
alert("Bodyclicked");
};

记得这个方法可能阻止事件在浏览器的冒泡阶段或者同时阻止事件在浏览器的冒泡和捕获阶段。

相关文章