在Nicholas C.Zakas"《Professional JavaScript for Web Developer》一書中,對于解決event對象兼容性問題進行了歸納封裝。
優點:無需過多考慮不同瀏覽器對event對象的差異,統一采用DOM標準調用event對象的方法和屬性
跨平臺的事件
1-創建Eventutil對象(工具包)
var Eventutil=new Object(); //OR var Eventutil={};
2-添加事件處理函數
Eventutil.addEventHandler=function(obj,type,fnName){ if(obj.addEventListener){//for DOM obj.addEventListener(type,fnName,false); }else if(obj.attachEvent){//for IE obj.attachEvent("on"+type,fnName); }else{//for others obj["on"+type]=fnName; } }
3-刪除事件處理函數
Eventutil.removeEventHandler=function(obj,type,fnName){ if(obj.removeEventListener){//for DOM obj.removeEventListener(type,fnName,false); }else if(obj.detachEvent){//for IE obj.detachEvent("on"+type,fnName); }else{//for others obj["on"+type]=null; } }
3-格式化event對象
Eventutil.formatEvent=function (oEvent){ if(document.all){ //IE字符代碼用keyCode,而DOM用charCode oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0; //eventphase:1-Event.CAPTURING_PHASE.. //2-Event.AT_TARGET,3-Event.BUBBLING_PHASE oEvent.eventPhase=2; oEvent.isChar=(oEvent.charCode>0); //pageX,pageY和clientX,clientY(IE no pageX/Y) oEvent.pageX=oEvent.clientX+document.body.scrollLeft; oEvent.pageY=oEvent.clientY+document.body.scrollTop; //阻止默認行為,IE:returnValue=false;DOM:preventDefault(); oEvent.preventDefault=function(){ this.returnValue=false;//?能不能用oEvent 當然可以 }; //取消事件冒泡,IE:cancelBubble=true;DOM:stopPropagation() oEvent.stopPropagation=function(){ this.cancelBubble=true; }; //引起事件的元素,IE:srcElement;DOM:target oEvent.target=oEvent.srcElement; //事件的第二目標 //IE:fromElement(鼠標所要離開的元素)-toElement(鼠標所要移入的元素) //DOM標準:relatedTarget if(oEvent.type=="onmouseover"){ oEvent.relatedTarget=oEvent.fromElement; }else if(oEvent.type=="onmouseout"){ oEvent.relatedTarget=oEvent.toElement; } //事件發生的時間,IE:no,DOM:timestamp(時間戳) oEvent.timeStamp=(new Date().getTime()); } return oEvent; }
4-獲取事件對象
在IE中,事件對象時window對象的一個屬性event
在DOM標準中,event對象必須作為唯一的參數傳遞給事件處理函數
關于caller的具體用法請參考click here
Eventutil.getEvent=function(){ if(window.event){ return this.formatEvent(window.event); }else{ //caller-每一個函數都有的屬性,它包含了指向了調用它的方法的引用 return Eventutil.getEvent.caller.arguments[0]; } }
5-使用方法
DEMO-阻止右鍵菜單JavaScript代碼(HTML省略,請讀者自行加上)
var oDiv=document.getElementById("demo"); document.oncontextmenu=function(){ var e=Eventutil.getEvent(); e.preventDefault(); }
最后的話:
如有錯誤或者不妥還請斧正!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87551.html
摘要:什么是繼承繼承是一種減少重復性代碼的一種設計模式,盡量弱化對象間耦合,開閉原則的一種很好的實現。三摻元類這種繼承方式是為了擴充類的一些重復函數而不重寫代碼,這個也是一種多繼承的效果。所以在使用的繼承前,最好可以很好的理解下原型鏈這個概念。 什么是繼承 繼承是一種減少重復性代碼的一種設計模式,盡量弱化對象間耦合,開閉原則的一種很好的實現。 javascript繼承 由于javascrip...
摘要:而就是產品具體實現某一種語言和文化的過程。貨幣的符號,以及數字分割方式各個國家都存在不同。那么有沒有其他的復數形式回答當然是肯定的,比如波蘭語。但這個是自己的語法,并非標準,同時這個語法還會破壞的測試,并不是一個很好的選擇。 記得我剛來我們公司的時候,接手現在負責的項目的時候,我就發覺了一個問題:所有的文本資源都是硬編碼在代碼里面。這當然會帶來很多問題。但考慮到我負責的這個項目是公司內...
摘要:該支持下列事件當到的連接已建立時觸發。取得該調試協議描述符。在關閉請求收到響應后執行,他將獲得下列參數一個對象,指明成功狀態當缺省時,將返回一個對象。當缺省時,將返回一個對象,並且狀態取決于屬性。 本文翻譯自:chrome-remote-interface原文更新時間:July 21,2017譯者:Pandorym Chrome 調試協議 的接口,他提供一個使用 JavaScript ...
閱讀 1762·2021-10-12 10:12
閱讀 2530·2021-09-29 09:42
閱讀 2711·2021-09-03 10:28
閱讀 2249·2019-08-30 15:54
閱讀 1153·2019-08-30 15:53
閱讀 1388·2019-08-30 11:26
閱讀 3357·2019-08-30 11:02
閱讀 2134·2019-08-30 11:02