二、跨浏览器事件对象(ie兼容模式中的event对象判断)
2019-04-05 本文已影响0人
萘小蒽
DOM和ie中的对象不同,但基于他们之间的相似性可以定制出跨浏览器的方案。
var EventUtil = {
addHandler:function(element,type,handler){ //绑定事件
if(element.addEventlistener){
element.addEventlistener(type , handler , false)
}else if(element.attachEvent){
element.attachEvent("on" + type , handler)
}else{
element["on" + type] = handler
}
},
getEvent:function(event){ //事件对象
return event ? event : window.event;
},
getTarget:function(event){ //事件目标元素
return event.target ? event.target : event.srcElement;
},
preventDefault:function(event){//取消事件默认行为
if(event.preventDefault){
event.preventDefault()
}else{
event.preventDefault = false
}
},
removeHandler:function(element,type,handler){//移除事件
if(element.removeEventlistener){
element.removeEventlistener(type , handler , false)
}else if(element.detachEvent){
element.detachEvent("on" + type , handler)
}else{
element["on" + type] = null;
}
},
stopPropagation:function(event){//阻止事件冒泡
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = false
}
},
}
上面的EventUtil.addHandler
方法用法。
EventUtil.removeHandler
同理,但是要注意移除的方法不能是匿名函数。
var btn = document.getElementById('myBtn');
function handler(){
console.log("handler")
}
EventUtil.addHandler(btn , click , handler);