將 DOM 0級事件處理程序和DOM2級事件處理程序 IE事件處理程序封裝為eventUtil對象，達到跨浏覽器的效果。代碼如下：
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;
}
},
// 獲取事件對象
getEvent:function (event) {
return event?event:window.event;
},
// 獲取事件的類型
getType:function (event) {
return event.type;
},
// 獲取事件對象目標
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;
}
},
// 阻止事件默認行為
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
}
}
在練習代碼的時候，自己出現了幾個錯誤的地方，導致運行出錯，記錄一下，加深記憶。
① 添加句柄是混淆參數的位置：首先是addEventHandler(element,type,handler)的參數分別表示，為哪個元素element添加事件，事件的類型type，事件處理函數handler。自己容易把handler和後面addEventLister(type,handler,false)中的false（表示冒泡階段）的位置混淆。
導致結果：在寫的過程，自己認真想了一下，理解了addEventHandler需要的哪些參數，就知道哪個位置該用哪個參數，最終寫對了，未導致錯誤。
解決辦法：理解並記住。
②在IE事件處理程序判斷分支中，對attachEvent和detachEvent拼寫錯誤，少了Event，只寫了attach或detach。
導致結果：雖然沒有報錯，但是無法使用addEventHandler和removeEventHandler在IE中添加或刪除事件。
解決辦法：多練記牢就行。attachEvent 和 detachEvent。
③忘記了在IE事件處理程序attachEvent 和 detachEvent的參數裡事件類型是需要加"on"的；寫成了attachEvent(type,handler)。其實正確的應該是attachEvent("on"+type,handler)，另外忘記了還有DOM0級事件處理的判斷分支
導致結果：同樣的，無法兼容IE事件處理。在IE上用封裝的方法添加或刪除事件不能成功。
解決辦法：也只能記住。還有一點需要注意：DOM0級事件中element["on"+type]這種方式。比如element["on"+"click"]等價於element.onclick。
④最後一個屬性的結尾也加逗號，比如在阻止事件默認行為 preventDefault：完成後加逗號，如下面代碼片段（注釋）
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},//最後一個屬性preventDefault完成後加了逗號，會出錯
}
導致結果：在IE中運行時報錯（其中event.js的54行是最後逗號的下一行，實際上就是逗號導致的；test.html的第10行則是因為調用了event.js中的eventUtil.addEventHandler方法）
解決辦法：毫無疑問，去掉最後的逗號即可。
⑤還是拼寫錯誤，IE中阻止事件冒泡的屬性cancelBubble，寫多了一個s，寫成了cancelBubbles。
導致結果：沒有報錯，但是無法阻止IE中的事件冒泡。
解決辦法：改回來
以上所述是小編給大家介紹的JavaScript將DOM事件處理程序封裝為event.js 出現的低級錯誤問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！