摘要:前言今天,為表達(dá)我對(duì)前端的熱愛(ài),特此發(fā)了一篇小總結(jié)。其實(shí)這是一種很籠統(tǒng)的說(shuō)法,因?yàn)榻壎ūO(jiān)聽(tīng)事件的方式不同,可能情況不一樣。但是不論怎樣,這么寫(xiě)準(zhǔn)沒(méi)錯(cuò)。監(jiān)聽(tīng)的綁定方式為了方便描述現(xiàn)象。火狐一般會(huì)自動(dòng)更新為最新版的,所以前的顧慮基本上沒(méi)有了。
前言今天520,為表達(dá)我對(duì)前端的熱愛(ài),特此發(fā)了一篇小總結(jié)。實(shí)際上你看不看這文章,對(duì)你目前來(lái)講,其實(shí)也沒(méi)多大影響,這是我的真心話哈哈
剛學(xué)前端的時(shí)候,有很多教程或者資料,都會(huì)教綁定監(jiān)聽(tīng)事件函數(shù)時(shí),可能會(huì)看到這么一句代碼
function (e) {
var e = e || window.event;
}
當(dāng)時(shí)給你指導(dǎo)的人/資料都會(huì)跟你解釋?zhuān)@是為了解決瀏覽器兼容性,為了兼容ie和Firefox。其實(shí)這是一種很籠統(tǒng)的說(shuō)法,因?yàn)榻壎ūO(jiān)聽(tīng)事件的方式不同,可能情況不一樣。但是不論怎樣,這么寫(xiě)準(zhǔn)沒(méi)錯(cuò)。
然而時(shí)至今日(2019-05-20),這種處理是否已經(jīng)還有必要呢,畢竟技術(shù)的東西變化很快,一些老舊的知識(shí),是否該摒棄,別讓其再迷惑你的腦袋,讓代碼更加累贅。
監(jiān)聽(tīng)的綁定方式為了方便描述e = e || window.event現(xiàn)象。先在這里總結(jié)綁定監(jiān)聽(tīng)為四類(lèi),分別舉例如下:
<div onclick="console.log()">div>
<div onclick="handlerClick()">div>
// 方式三
// 在js里直接綁定
document.getElementById("example").onclick = function() {...}
// 方式四
// 用綁定事件函數(shù)綁定
var obj = document.getElementById("example");
function handlerClick () {...}
// ie8含8以下用attachEvent,監(jiān)聽(tīng)事件要帶"on"
obj.addEventListener ");"click", handlerClick, false) : obj.attachEvent("onclick", handlerClick);
event的總結(jié)
我直接上總結(jié)了,以前的資料常說(shuō)的,F(xiàn)irefox瀏覽器只認(rèn)識(shí)監(jiān)聽(tīng)綁定的函數(shù)的第一個(gè)參數(shù)event,而IE8以下只認(rèn)識(shí)window.event;
現(xiàn)在經(jīng)過(guò)測(cè)試,要糾正一點(diǎn)就是,Firefox瀏覽器現(xiàn)在也支持window.event了。估計(jì)是版本比較老的火狐才不支持吧
所以現(xiàn)在唯一特立獨(dú)行的就是讓人苦惱的IE8(含8)以下的了。所以時(shí)至今日的新的總結(jié)就是:
方式一只有ie8以下(含8)只認(rèn)識(shí)window.event,其他瀏覽器都支持window.event和句柄第一個(gè)參數(shù)event(剛好與window.event同名而已)
這種綁定方式,只需要寫(xiě)個(gè)event就夠了,通吃!雖然本質(zhì)上要知道ie8以下是當(dāng)做window.event,只是省略了window
方式二可以傳參window.event(可省略window),也可以不傳參,直接在函數(shù)里用window.event(可省略window)。 畢竟所有瀏覽器都認(rèn)識(shí)window.event
方式三ie8以下(含8)不支持函數(shù)第一個(gè)參數(shù)是event的
所以統(tǒng)一不寫(xiě)第一個(gè)參數(shù)event,直接在代碼里用event就好了。因?yàn)榇蠹叶贾С謜indow.event
方式四任何一種方式都支持,可以是綁定函數(shù)帶第一個(gè)參數(shù)event也可以是不帶第一個(gè)參數(shù)直接寫(xiě)window.event(可省略window)
在這種方式里很特殊,就算是IE8以下的都支持第一個(gè)參數(shù)event
大總結(jié)以后要用event的話,所有瀏覽器統(tǒng)一當(dāng)做window.event來(lái)處理就行了。火狐一般會(huì)自動(dòng)更新為最新版的,所以前的顧慮基本上沒(méi)有了。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/6738.html
摘要:接受個(gè)參數(shù)事件類(lèi)型,是否冒泡,是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級(jí)元素的事件,但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。 一、頁(yè)面布局 1.問(wèn)題:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局 ,其中左欄、右欄寬度各為300px,中間自適應(yīng)。 解決方案一:使用浮動(dòng)布局` Document ...
摘要:接受個(gè)參數(shù)事件類(lèi)型,是否冒泡,是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級(jí)元素的事件,但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。 一、頁(yè)面布局 1.問(wèn)題:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局 ,其中左欄、右欄寬度各為300px,中間自適應(yīng)。 解決方案一:使用浮動(dòng)布局` Document ...
摘要:接受個(gè)參數(shù)事件類(lèi)型,是否冒泡,是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級(jí)元素的事件,但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。 一、頁(yè)面布局 1.問(wèn)題:假設(shè)高度已知,請(qǐng)寫(xiě)出三欄布局 ,其中左欄、右欄寬度各為300px,中間自適應(yīng)。 解決方案一:使用浮動(dòng)布局` Document ...
摘要:一嚴(yán)格模式與混雜模式如何觸發(fā)這兩種模式,區(qū)分它們有何意義聲明位于文檔中的最前面的位置,處于標(biāo)簽之前。包含過(guò)渡和的也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但是有過(guò)渡而沒(méi)有會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。 一:HTML+css 1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? Doctype聲明位于文檔中的最前面的位置,處于標(biāo)簽...
摘要:一嚴(yán)格模式與混雜模式如何觸發(fā)這兩種模式,區(qū)分它們有何意義聲明位于文檔中的最前面的位置,處于標(biāo)簽之前。包含過(guò)渡和的也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但是有過(guò)渡而沒(méi)有會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。 一:HTML+css 1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? Doctype聲明位于文檔中的最前面的位置,處于標(biāo)簽...
閱讀 1322·2021-09-22 15:09
閱讀 2656·2021-08-20 09:38
閱讀 2402·2021-08-03 14:03
閱讀 863·2019-08-30 15:55
閱讀 3368·2019-08-30 12:59
閱讀 3551·2019-08-26 13:48
閱讀 1886·2019-08-26 11:40
閱讀 647·2019-08-26 10:30