將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 出現的低級錯誤問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!