//定义一个EventUtil对象
var EventUtil = {
//兼容浏览器注册事件处理程序
addHandler: function(element, type, handler){
// 该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法
element.addEventListener(type, handler, false); // 若存在,则使用该方法
}
else if (element.attachEvent){ // 如果存在的是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() 阻止事件的默认行为
常用属性:
type属性 代表事件的类型
srcElement属性 代表获取事件的实际目标(类似与DOM中的target)
cancelBubble 属性 用于阻止事件冒泡,默认值为false,表示不阻止冒泡,true为阻止事件冒泡(与DOM中的 stopPropagation() 方法相同),
returnValue属性 用于阻止默认事件的行为,默认值为true,设置为false就可以取消事件的默认行为(与DOM中的 preventDefault()方法相同)。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。