<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>跨瀏覽器事件處理程序</title>
</head>
<body>
<input?type="button"?value="按鈕"?id="btn">
<script?type="text/javascript">
??function?showMes(){
alert("hello!");
}
????var?btn=document.getElementById("btn");
var?eventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){????????????????????//DOM?2級判斷
element.addEventListener(type,handler,false);
}
else?if(element.attachEvent){????????????????????????//IE事件處理程序判斷
element.attachEvent('on'+type,handler);
}
else{????????????????????????HTML事件處理程序
element['on'+type]=handler;????//element.onclick===element['onclick']
}
},
//刪除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){????????????????????//DOM?2級判斷
element.removeEventListener(type,handler,false);
}
else?if(element.detachEvent){????????????????????????//IE事件處理程序判斷
element.detachEvent('on'+type,handler);
}
else{????????????????????????HTML事件處理程序
element['on'+type]=null;???
}
}
}
??eventUtil.addHandler(btn,'click',showMes);
??//?eventUtil.removeHandler(btn,'click',showMes);
</script>
</body>
</html>
2016-11-02
換而言之，element.addEventListner的返回值是布爾類型咯？
2016-08-02
同問,就是if(element.addEventListner)這樣的書寫格式!在哪里有講到.表達(dá)什么意思.雖然知道在這個程序是指如果支持element.addEventListner就執(zhí)行后面的程序,
2016-08-01
主要作用就是為了代碼能夠適應(yīng)不同的瀏覽器，在這個句柄中我們看到有三個判斷：
if(element.addEventListener){}??????????????????
else?if(element.attachEvent){}??
else{}?
???? 就是為了后面代碼調(diào)用function(element,type,handler){}這個函數(shù)時候，能夠讓調(diào)用的代碼產(chǎn)生作用，如果我們不用句柄，很可能就是調(diào)用的代碼在不同的瀏覽器有的有效果有的卻沒效果（這三條語句就保證了在所有瀏覽器都能正確執(zhí)行我們所調(diào)用的代碼）?。前面兩個是dom2級的，最后一個是dom0級的，沒有什么瀏覽器不能響應(yīng)0級的。?寫兩個dom2級是因為在ie瀏覽器中不能夠響應(yīng)???element.addEventListener????這樣的寫法，她只響應(yīng)element.attachEvent這樣的寫法。 句柄就是個官方名字吧，我們把這樣的操作稱之為添加句柄，理解一下就行了。