將 DOM 0級(jí)事件處理程序和DOM2級(jí)事件處理程序 IE事件處理程序封裝為eventUtil對(duì)象，達(dá)到跨瀏覽器的效果。代碼如下：

var eventUtil = {// 添加事件句柄addEventHandler: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;}},// 刪除事件句柄removeEventHandler: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;}},// 獲取事件對(duì)象getEvent:function (event) {return event?event:window.event;},// 獲取事件的類型getType:function (event) {return event.type;},// 獲取事件對(duì)象目標(biāo)getTarget:function (event) {if (event.target) {return event.target;}else{return event.srcElement;}},// 阻止事件冒泡stopPropagation:function (event) {if (event.stopPropagation) {event.stopPropagation();}else{event.cancelBubble=true;}},// 阻止事件默認(rèn)行為preventDefault:function (event) {if (event.preventDefault) {event.preventDefault();}else{event.returnValue=false;}}}

在練習(xí)代碼的時(shí)候，自己出現(xiàn)了幾個(gè)錯(cuò)誤的地方，導(dǎo)致運(yùn)行出錯(cuò)，記錄一下，加深記憶。

① 添加句柄是混淆參數(shù)的位置：首先是addEventHandler(element,type,handler)的參數(shù)分別表示，為哪個(gè)元素element添加事件，事件的類型type，事件處理函數(shù)handler。自己容易把handler和后面addEventLister(type,handler,false)中的false（表示冒泡階段）的位置混淆。

　　導(dǎo)致結(jié)果：在寫的過(guò)程，自己認(rèn)真想了一下，理解了addEventHandler需要的哪些參數(shù)，就知道哪個(gè)位置該用哪個(gè)參數(shù)，最終寫對(duì)了，未導(dǎo)致錯(cuò)誤。

　　解決辦法：理解并記住。

②在IE事件處理程序判斷分支中，對(duì)attachEvent和detachEvent拼寫錯(cuò)誤，少了Event，只寫了attach或detach。

　　導(dǎo)致結(jié)果：雖然沒有報(bào)錯(cuò)，但是無(wú)法使用addEventHandler和removeEventHandler在IE中添加或刪除事件。

　　解決辦法：多練記牢就行。attachEvent 和 detachEvent。

③忘記了在IE事件處理程序attachEvent 和 detachEvent的參數(shù)里事件類型是需要加"on"的；寫成了attachEvent(type,handler)。其實(shí)正確的應(yīng)該是attachEvent("on"+type,handler)，另外忘記了還有DOM0級(jí)事件處理的判斷分支

　　導(dǎo)致結(jié)果：同樣的，無(wú)法兼容IE事件處理。在IE上用封裝的方法添加或刪除事件不能成功。

　　解決辦法：也只能記住。還有一點(diǎn)需要注意：DOM0級(jí)事件中element["on"+type]這種方式。比如element["on"+"click"]等價(jià)于element.onclick。

④最后一個(gè)屬性的結(jié)尾也加逗號(hào)，比如在阻止事件默認(rèn)行為 preventDefault：完成后加逗號(hào)，如下面代碼片段（注釋）

preventDefault:function (event) {if (event.preventDefault) {event.preventDefault();}else{event.returnValue=false;}},//最后一個(gè)屬性preventDefault完成后加了逗號(hào)，會(huì)出錯(cuò)}

　　導(dǎo)致結(jié)果：在IE中運(yùn)行時(shí)報(bào)錯(cuò)（其中event.js的54行是最后逗號(hào)的下一行，實(shí)際上就是逗號(hào)導(dǎo)致的；test.html的第10行則是因?yàn)檎{(diào)用了event.js中的eventUtil.addEventHandler方法）

　　解決辦法：毫無(wú)疑問(wèn)，去掉最后的逗號(hào)即可。

⑤還是拼寫錯(cuò)誤，IE中阻止事件冒泡的屬性cancelBubble，寫多了一個(gè)s，寫成了cancelBubbles。

　　導(dǎo)致結(jié)果：沒有報(bào)錯(cuò)，但是無(wú)法阻止IE中的事件冒泡。

　　解決辦法：改回來(lái)

以上所述是小編給大家介紹的JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級(jí)錯(cuò)誤問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！