兼容各種瀏覽器的事件偵聽方法(出自:慕課網 http://www.imooc.com/video/2138/0 DOM事件探祕):
需求:做事件偵聽,兼容各種版本瀏覽器
coding:
<span style="white-space:pre"> </span>var eventUtil = {
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){//支持DOM2級的事件處理
element.addEventListener(type,handler,false)
}else if (element.attachEvent) {//IE的事件偵聽
element.attachEvent("on"+type,handler);
}else{//更加底版本瀏覽器,採用Dom0級的事件偵聽
element["on"+type] = handler;
};
},
//刪除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){//支持DOM2級的事件處理
element.removeEventListener(type,handler,false)
}else if (element.detachEvent) {//IE的事件偵聽
element.detachEvent("on"+type,handler);
}else{//更加底版本瀏覽器,採用Dom0級的事件偵聽
element["on"+type] = null;
};
}
}
//使用方法
var divD = document.getElementById("Div");
eventUtil.addHandler(divD,"click",showHello);
//eventUtil.removeHandler(divD,"click",showHello);
function showHello(){
alert("Hello!");
}
原理:不同瀏覽器對DOM事件的偵聽方式不同,分爲HTML形式(以上沒涉及到),DOM0級,DOM2級;
注意:IE瀏覽器不支持DOM2級事件偵聽,且事件書寫時要 "on"+ ,默認爲冒泡方式捕獲;