本文實例講述了JS事件添加和移出的兼容寫法。分享給大家供大家參考,具體如下:
var EventUtil = { addHandler : 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; } }, getEvent : function (event){ return event ? event : window.event; }, preventDefault : function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, removeHandsler : 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] = handler; } } stopPropagation : function(event){ if(event.stopPropagation){ event.stopPropagation(); }else { event.cancelBubble = true; } }, getRelatedTarget : function(event){ if(event.relatedTarget){ return event.relatedTarget; }else if (event.toElement){ return event.toElement; }else if(event.fromElement){ return event.fromElement; }esle { return null; } }, getButton : function (event){ if(document.implementation.hasFeature("MouseEvents" , "2.0")){ return event.button; }else{ switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } } } ;
其中,addHandler 和 removeHandsler 個方法首先都會檢測傳入的元素中是否存在DOM2級方法.如果存在DOM2級方法,則使用該方法:傳入事件類型,事件處理程序函數和第三個參數fasle(表示冒泡階段). 如果存在的是IE的方法,則采取第二種方案.注意此時的事件類型必須加上"on"前綴.最後一種可能就是使用DOM0級方法(在現代浏覽器中,應該不會執行這裡的代碼). 此時,我們使用的是方括號語法來將屬性名指定為事件處理程序,或者將屬性設置為null.
可以像下面這樣使用EventUtil對象:
var btn = document.getElementById("myBtn"); var handler = function(){ alert("Clicked"); }; EventUtil.addHandler(btn , "click", handler); //略去其他代碼 EventUtil.removeHandler(btn, "click", handler);
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。