摘要:基本操作事件兼容性寫在前面在開發(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ù)傳入的,例如:
當(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)的處理方式。
借鑒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
摘要:然而問題是,這個(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)典的方法、兼容性好,但這種代碼寫起...
摘要:前言終于要做這個(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é)...
摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...
摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語(yǔ)法,閉包,原型鏈,繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...
閱讀 3034·2023-04-25 18:06
閱讀 3289·2021-11-22 09:34
閱讀 2863·2021-08-12 13:30
閱讀 2051·2019-08-30 15:44
閱讀 1666·2019-08-30 13:09
閱讀 1634·2019-08-30 12:45
閱讀 1720·2019-08-29 11:13
閱讀 3614·2019-08-28 17:51