码迷,mamicode.com
首页 > Web开发 > 详细

js事件跨浏览器解决问题的学习与总结

时间:2016-03-11 19:07:08      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:event   dom事件   ie事件

//定义一个EventUtil对象
var EventUtil = { 
//兼容浏览器注册事件处理程序
addHandler: function(element, type, handler){ 
// 该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数 
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法 
element.addEventListener(type, handler, false); // 若存在,则使用该方法 
} 
else if (element.addEvent){ // 如果存在的是IE的方法 
element.attachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 
}
 else { // 最后一种可能是使用DOM0级 
element["on" + type] = hander; 
} 
}, 
//兼容浏览器取消事件处理程序
removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序 
if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法 
element.removeEventListener(type, handler, false); // 若存在,则使用该方法 
} 
else if (element.detachEvent){ // 如果存在的是IE的方法 
element.detachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 
}
 else { // 最后一种可能是使用DOM0及方法(在现代浏览器中,应该不会执行这里的代码) 
element["on" + type] = null; 
} 
},
//兼容浏览器获取浏览器事件对象的程序
getEvent:function(event) {
	return event?event:window.event;
},
//兼容浏览器获取事件来自哪个元素的程序
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;
	}
}
}
//下面是简单的使用上面的封装对象
window.onload=function(){
	var htmlobj = document.documentElement;
	var bodyobj = document.body;
	var alinkobj=document.getElementById(‘alink‘);
	 EventUtil.addHandler(bodyobj,‘click‘,function(){alert("我是body元素");});
         EventUtil.addHandler(alinkobj,‘click‘,function(){alert("我是alink元素");});
         EventUtil.addHandler(alinkobj,‘click‘,function(e){e=event||window.event;
			  	alert(EventUtil.getElement(e));});
         EventUtil.addHandler(alinkobj,‘click‘,function(e){e=event||window.event;
			  	alert(e.type);});

         EventUtil.addHandler(alinkobj,‘click‘,function(e){e=event||window.event;
			 	EventUtil.preventDefault(e);

			 });
        EventUtil.addHandler(alinkobj,‘click‘,function(e){e=event||window.event;
			 	  EventUtil.stopPropagation(e);

			 });
		}

(1)DOM中的事件对象      

    常用属性:

          type:    代表事件的类型

          target:   代表事件的实际目标

      currentTarget:其事件处理程序当前正在处理事件的那个元素。

     重要属性方法:

            stopPropagation()  阻止事件冒泡

            preventDefault()   阻止事件的默认行为


(2)IE中的事件对象

  常用属性:  

             type属性        代表事件的类型

             srcElement属性  代表获取事件的实际目标(类似与DOM中的target

            cancelBubble 属性  用于阻止事件冒泡,默认值为false,表示不阻止冒泡,true为阻止事件冒泡(DOM中的 stopPropagation() 方法相同)

            returnValue属性  用于阻止默认事件的行为,默认值为true,设置为false就可以取消事件的默认行为(与DOM中的 preventDefault()方法相同)。

     



      


js事件跨浏览器解决问题的学习与总结

标签:event   dom事件   ie事件

原文地址:http://xiyin001.blog.51cto.com/9831864/1750026

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!