成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Object of Event-Professional JavaScript for Web De

104828720 / 1842人閱讀

在Nicholas C.Zakas"《Professional JavaScript for Web Developer》一書中,對于解決event對象兼容性問題進(jìn)行了歸納封裝。

優(yōu)點:無需過多考慮不同瀏覽器對event對象的差異,統(tǒng)一采用DOM標(biāo)準(zhǔn)調(diào)用event對象的方法和屬性

跨平臺的事件

1-創(chuàng)建Eventutil對象(工具包)

var Eventutil=new Object();  //OR var Eventutil={};

2-添加事件處理函數(shù)

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-刪除事件處理函數(shù)

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;

        //阻止默認(rèn)行為,IE:returnValue=false;DOM:preventDefault();

        oEvent.preventDefault=function(){
            this.returnValue=false;//?能不能用oEvent 當(dāng)然可以
        };

        //取消事件冒泡,IE:cancelBubble=true;DOM:stopPropagation()

        oEvent.stopPropagation=function(){
            this.cancelBubble=true;
        };

        //引起事件的元素,IE:srcElement;DOM:target
        oEvent.target=oEvent.srcElement;

        //事件的第二目標(biāo)
        //IE:fromElement(鼠標(biāo)所要離開的元素)-toElement(鼠標(biāo)所要移入的元素)
        //DOM標(biāo)準(zhǔn):relatedTarget

        if(oEvent.type=="onmouseover"){
            oEvent.relatedTarget=oEvent.fromElement;
        }else if(oEvent.type=="onmouseout"){
            oEvent.relatedTarget=oEvent.toElement;
        }

        //事件發(fā)生的時間,IE:no,DOM:timestamp(時間戳)

        oEvent.timeStamp=(new Date().getTime());
    }
    return oEvent;
}

4-獲取事件對象

在IE中,事件對象時window對象的一個屬性event

在DOM標(biāo)準(zhǔn)中,event對象必須作為唯一的參數(shù)傳遞給事件處理函數(shù)

關(guān)于caller的具體用法請參考click here

Eventutil.getEvent=function(){
    if(window.event){
        return this.formatEvent(window.event);
    }else{
        //caller-每一個函數(shù)都有的屬性,它包含了指向了調(diào)用它的方法的引用
        return Eventutil.getEvent.caller.arguments[0];
    }
}

5-使用方法

DEMO-阻止右鍵菜單JavaScript代碼(HTML省略,請讀者自行加上)

var oDiv=document.getElementById("demo");
document.oncontextmenu=function(){
    var e=Eventutil.getEvent();
    e.preventDefault();
}

最后的話:

如有錯誤或者不妥還請斧正!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/87551.html

相關(guān)文章

  • JS 設(shè)計模式 三(繼承)

    摘要:什么是繼承繼承是一種減少重復(fù)性代碼的一種設(shè)計模式,盡量弱化對象間耦合,開閉原則的一種很好的實現(xiàn)。三摻元類這種繼承方式是為了擴(kuò)充類的一些重復(fù)函數(shù)而不重寫代碼,這個也是一種多繼承的效果。所以在使用的繼承前,最好可以很好的理解下原型鏈這個概念。 什么是繼承 繼承是一種減少重復(fù)性代碼的一種設(shè)計模式,盡量弱化對象間耦合,開閉原則的一種很好的實現(xiàn)。 javascript繼承 由于javascrip...

    shusen 評論0 收藏0
  • 實戰(zhàn)React App的i18n

    摘要:而就是產(chǎn)品具體實現(xiàn)某一種語言和文化的過程。貨幣的符號,以及數(shù)字分割方式各個國家都存在不同。那么有沒有其他的復(fù)數(shù)形式回答當(dāng)然是肯定的,比如波蘭語。但這個是自己的語法,并非標(biāo)準(zhǔn),同時這個語法還會破壞的測試,并不是一個很好的選擇。 記得我剛來我們公司的時候,接手現(xiàn)在負(fù)責(zé)的項目的時候,我就發(fā)覺了一個問題:所有的文本資源都是硬編碼在代碼里面。這當(dāng)然會帶來很多問題。但考慮到我負(fù)責(zé)的這個項目是公司內(nèi)...

    arashicage 評論0 收藏0
  • 【譯】chrome-remote-interface

    摘要:該支持下列事件當(dāng)?shù)降倪B接已建立時觸發(fā)。取得該調(diào)試協(xié)議描述符。在關(guān)閉請求收到響應(yīng)后執(zhí)行,他將獲得下列參數(shù)一個對象,指明成功狀態(tài)當(dāng)缺省時,將返回一個對象。當(dāng)缺省時,將返回一個對象,並且狀態(tài)取決于屬性。 本文翻譯自:chrome-remote-interface原文更新時間:July 21,2017譯者:Pandorym Chrome 調(diào)試協(xié)議 的接口,他提供一個使用 JavaScript ...

    lentoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<