国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js基本操作-事件兼容性

妤鋒シ / 2313人閱讀

摘要:基本操作事件兼容性寫在前面在開發(fā)過程中,我們會(huì)經(jīng)常的遇到各種事件監(jiān)聽以及事件處理的情況。然而在曙光來(lái)臨之前,仍然需要對(duì)那些不支持級(jí)事件處理程序的瀏覽器進(jìn)行兼容性處理。

js基本操作-事件兼容性 寫在前面

在WEB開發(fā)過程中,我們會(huì)經(jīng)常的遇到各種事件監(jiān)聽以及事件處理的情況。

下面舉個(gè)栗子說明下哈:

事件(Event)即為用戶的動(dòng)作,例如:用戶點(diǎn)擊鼠標(biāo),產(chǎn)生onclick事件;按下鍵盤,產(chǎn)生onkeyDown事件;改變輸入框的值,產(chǎn)生onchange事件...

W3C標(biāo)準(zhǔn)規(guī)定,事件是作為函數(shù)的參數(shù)傳入的,例如:

點(diǎn)擊我將獲得節(jié)點(diǎn)1 點(diǎn)擊我將獲得節(jié)點(diǎn)2

當(dāng)在元素上點(diǎn)擊時(shí),彈出警告框,內(nèi)容為點(diǎn)擊我將獲得節(jié)點(diǎn)。這里函數(shù)傳入的參數(shù)e,就是事件。瀏覽器會(huì)實(shí)時(shí)的根據(jù)用戶點(diǎn)擊的a標(biāo)簽的不同返回不同的節(jié)點(diǎn)內(nèi)容。

這種做法在FireFox、Chrome、Safari等遵循W3C規(guī)范的瀏覽器下是沒有問題的,唯獨(dú)在IE(暫時(shí)僅限于8.0以下版本)下是行不通的,IE采用了一種非標(biāo)準(zhǔn)的方式,并不是將事件作為函數(shù)參數(shù)傳入,而是將事件作為window對(duì)象的event屬性:window.event傳遞進(jìn)去的;而且,IE使用的是event.srcEvent來(lái)獲取目標(biāo)事件...

既然IE8以下不行,那有什么方法解決這個(gè)問題尼?
上面其實(shí)涉及到JS事件的兼容性問題,下面我們將從事件處理的角度來(lái)慢慢的分析這個(gè)問題。

當(dāng)然,還是老話,所有的方法都來(lái)自網(wǎng)上,學(xué)到了才是自己的!!

然后,寫在前面,帶上我們可愛的小伙伴。廢話不多說,下面我們開始看起吧!

基本介紹

文章主要是對(duì)js的this進(jìn)行簡(jiǎn)單的說明和介紹,順帶會(huì)添加一些代碼,沒辦法,語(yǔ)言能力有限,說明不了的只能直接上代碼了。

IE瀏覽器從IE9開始已經(jīng)支持DOM2事件處理程序,但是對(duì)于老版本的ie瀏覽器,任然使用attachEvent方式來(lái)為dom元素添加事件。值得慶幸的是微軟已宣布2016年將不再對(duì)ie8進(jìn)行維護(hù),對(duì)于廣大前端開發(fā)者無(wú)疑是一個(gè)福音。然而在曙光來(lái)臨之前,仍然需要對(duì)那些不支持DOM2級(jí)事件處理程序的瀏覽器進(jìn)行兼容性處理。
嘛,下面,將慢慢的處理事件在常規(guī)情況下(額,就是W3C和IE)的處理方式。

通用的事件偵聽器函數(shù)實(shí)現(xiàn)

借鑒GitHub上markyun寫的事件偵聽器函數(shù)實(shí)現(xiàn)。下面我只是做一些注釋性說明

// event(事件)工具集,來(lái)源:https://github.com/markyun
markyun.Event = {
    // 頁(yè)面加載完成后
    // 主要是原生JS,頁(yè)面只能加載一次window.onload;這里使用該方法可以綁定多個(gè)方法。
    readyEvent : function(fn) {
        if (fn==null) {
            fn=document;
        }
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
            window.onload = fn;
        } else {
            window.onload = function() {
                oldonload();
                fn();
            };
        }
    },
    // 視能力分別使用dom0||dom2||IE方式 來(lái)綁定事件
    // 下面的順序:標(biāo)準(zhǔn)dom2,IE dom2, dom
    // 參數(shù): 操作的元素,事件名稱 ,事件處理程序
    addEvent : function(element, type, handler) {
        if (element.addEventListener) {
            //事件類型、需要執(zhí)行的函數(shù)、是否捕捉
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, function() {
                handler.call(element);
            });
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除事件
    removeEvent : function(element, type, handler) {
        if (element.removeEnentListener) {
            element.removeEnentListener(type, handler, false);
        } else if (element.datachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }, 
    // 阻止事件 (主要是事件冒泡,因?yàn)镮E不支持事件捕獲)
    stopPropagation : function(ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();// 標(biāo)準(zhǔn)w3c
        } else {
            ev.cancelBubble = true;// IE
        }
    },
    // 取消事件的默認(rèn)行為
    preventDefault : function(event) {
        if (event.preventDefault) {
            event.preventDefault();// 標(biāo)準(zhǔn)w3c
        } else {
            event.returnValue = false;// IE
        }
    },
    // 獲取事件目標(biāo)
    getTarget : function(event) {
        // 標(biāo)準(zhǔn)W3C 和 IE
        return event.target || event.srcElement;
    },
    // 獲取event對(duì)象的引用,取到事件的所有信息,確保隨時(shí)能使用event;
    getEvent : function(e) {
        var ev = e || window.event;
        if (!ev) {
            var c = this.getEvent.caller;
            while (c) {
                ev = c.arguments[0];
                if (ev && Event == ev.constructor) {
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
}; 
1.簡(jiǎn)單的說明

IE下的事件特例

IE下的事件對(duì)象是在window下的,而標(biāo)準(zhǔn)應(yīng)該作為一個(gè)參數(shù), 傳為函數(shù)第一個(gè)參數(shù);
IE的事件對(duì)象定義的屬性跟標(biāo)準(zhǔn)的不同,如:

cancelBubble 默認(rèn)為false, 如果為true就是取消事件冒泡;
returnValue 默認(rèn)是true,如果為false就取消默認(rèn)事件;
srcElement, 這個(gè)指的是標(biāo)準(zhǔn)W3C下的獲取事件目標(biāo)target,Firefox下的也是srcElement;

其他說明

以上的所有方法,都來(lái)自網(wǎng)上。

所有的方法,都必須腳踏實(shí)地,在具體應(yīng)用場(chǎng)景下去分析、去選擇,我們應(yīng)該按照具體的情況,來(lái)選擇方法。

因?yàn)闉g覽器的多樣性,前端的應(yīng)用場(chǎng)景經(jīng)常很復(fù)雜,性能優(yōu)化充滿挑戰(zhàn),也充滿機(jī)遇。

學(xué)會(huì)了才是自己的,知道會(huì)用會(huì)寫,才是我們最終的目標(biāo)。

參考文檔

javascript秘密花園

markyun

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/86507.html

相關(guān)文章

  • 原生js練習(xí)題---第四課

    摘要:然而問題是,這個(gè)法則在導(dǎo)航條的主體是可行的但是子選單因?yàn)榍懊嫣岬降娜龑忧短讟?gòu)造圓角,已經(jīng)無(wú)法減少嵌套了,同時(shí)還得考慮到子選單也是嵌套在導(dǎo)航條里的啊。。。同理,反過來(lái)進(jìn)入子選單時(shí)自然就用來(lái)抵消達(dá)到篩選的目的。 0x1setTimeout應(yīng)用 實(shí)現(xiàn)效果:4-01setTimeout應(yīng)用 又見導(dǎo)航條,先看下css,這里用的是雪碧圖背景做出圓角的效果,雖然是經(jīng)典的方法、兼容性好,但這種代碼寫起...

    Snailclimb 評(píng)論0 收藏0
  • javascript框架學(xué)習(xí)計(jì)劃

    摘要:前言終于要做這個(gè)計(jì)劃了,前端框架千千萬(wàn),絕不能一頭扎進(jìn)去盲目開始,本片文章總結(jié)一下目前前各種端框架,以及它們的用途主要解決什么問題,然后最后做出學(xué)習(xí)計(jì)劃。希望入了前端坑的同學(xué)們可以有所幫助。但是庫(kù)與框架很難嚴(yán)格區(qū)分,所以統(tǒng)一稱為解決方案。 前言:終于要做這個(gè)計(jì)劃了,前端框架千千萬(wàn),絕不能一頭扎進(jìn)去盲目開始,本片文章總結(jié)一下目前前各種端框架,以及它們的用途主要解決什么問題,然后最后做出學(xué)...

    airborne007 評(píng)論0 收藏0
  • 面試知識(shí)點(diǎn)總結(jié)

    摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

    王晗 評(píng)論0 收藏0
  • 面試知識(shí)點(diǎn)總結(jié)

    摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

    CrazyCodes 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<