JavaScript跨浏览器事件对象EventUtil(IE中event对象和方法DOM中都有,此处提供两者映射方法)

虽然DOM和IE中的event对象不同,但基于它们之间的相似性依旧可以拿出跨浏览器方案来。
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=false;
					}
				},
				removeHandler:function(element,type,handler){
					//省略部分代码
				},
				stopPropagation:function(event){
					if(event.stopPropagation){
						event.stopPropagation();
					}else{
						event.cancelBubble=true;
					}
				}
			};

以上代码显示,我们为EventUtil对象添加了四个新方法。第一个是getEvent(),它返回对event对象的引用。考虑到IE事件中对象的位置不同,可以使用这个方法来取得event对象,而不必担心指定事件处理函数的方式。在使用这个方法时,必须假设有一个事件对象传入到事件处理函数中,并且要把该变量传给这个方法,如下所示:

btn.οnclick=function(event){
				event=EventUtil.getEvent(event);
			};
在兼容DOM的浏览器中,event变量只是简单的传入传出。而在IE中,event对象参数是未定义的(undefined),因此就会返回window.event。将这一行代码添加到事件处理程序的开头,就可以确保随时都能使用event对象,而不必担心用户使用的是什么浏览器。

第二个方法是getTarget(),它返回事件的目标。在这个方法内部,会检测event对象的target属性,如果存在则返回该属性的值;否则,返回srcElement属性的值。像下面这样使用这个方法:

btn.οnclick=function(event){
				event=EventUtil.getEvent(event);
				vat target=EventUtil.getTarget(event);
			};

第三个方法是preventDefault(),用于取消事件的默认行为。在传入event对象后,这个方法会检查是否存在preventDefault()方法,如果存在则调用该方法。如果 preventDefault()方法不存在,则将returnValue设置为false。下面是使用这个方法的例子:
link.οnclick=function(event){
				event=EventUtil.getEvent(event);
				EventUtil.preventDefault(event);
			};
以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先,使用EventUtil.getEvent()取得event对象,然后将其传入到EventUtil.preventUtil()以取消默认行为。

第四个方法是stopPropagation(),其实现方法类似。首先尝试使用DOM方法阻止事件流,否则就使用cancelBubble属性。下面看一个例子。

var btn=document.getElementById("muBtn");
			btn.οnclick=function(event){
				alert("Clicked");
				event=EventUtil.getEvent(event);
				EventUtil.stopPropagation(event);
			};
			document.body.οnclick=function(event){
				alert("Body clicked");
			};
在此,首先使用EventUtil.getEvent()取得了event对象,然后又将其传入到EventUtil.stopPropagation()。别忘了由于IE不支持事件捕获,因此这个方法在跨浏览器的情况下,也只能用来阻止事件冒泡。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值