關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
更新時(shí)間：2010年10月14日 00:04:13 作者：
原來是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。（如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料）
假設(shè)在我們頁(yè)面有這么一段標(biāo)簽：
<body>
<div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div>
</body>
現(xiàn)在在頁(yè)面加入這么一段腳本：
<script type="text/javascript">
window.onload=function(){ //在各個(gè)層級(jí)的元素上綁定事件
window.onclick=func;
document.onclick=func;
document.getElementById("timeDiv").onclick=func;
document.body.onclick=func;
}
function func(){ //響應(yīng)函數(shù)，輸出響應(yīng)的元素
document.getElementById("timeDiv").innerHTML+=this+"<br>";
}
在firefox以及IE 8下打開頁(yè)面，在標(biāo)簽testDiv（灰色方塊）上單擊，結(jié)果分別如下截圖：
document.body.onclick=func;
事件處理函數(shù)將被添加到事件的冒泡階段。
以上就是對(duì)于IE、firefox里面冒泡事件響應(yīng)層級(jí)的一點(diǎn)介紹，同時(shí)順帶介紹了采用傳統(tǒng)事件處理函數(shù)直接賦值的默認(rèn)處理。詳細(xì)的講解可參見大牛Nicholas C. Zakas所著的《javascript高級(jí)程序設(shè)計(jì)》。
PS：以上內(nèi)容僅僅為個(gè)人讀書筆記，如有錯(cuò)漏，隨時(shí)歡迎指正。同時(shí)希望能有更多的前端愛好者們共同分享你們的心得！
復(fù)制代碼 代碼如下:
<body>
<div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div>
</body>
現(xiàn)在在頁(yè)面加入這么一段腳本：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.onload=function(){ //在各個(gè)層級(jí)的元素上綁定事件
window.onclick=func;
document.onclick=func;
document.getElementById("timeDiv").onclick=func;
document.body.onclick=func;
}
function func(){ //響應(yīng)函數(shù)，輸出響應(yīng)的元素
document.getElementById("timeDiv").innerHTML+=this+"<br>";
}
在firefox以及IE 8下打開頁(yè)面，在標(biāo)簽testDiv（灰色方塊）上單擊，結(jié)果分別如下截圖：
firefox下結(jié)果
IE 8下結(jié)果
可以看到，兩者結(jié)果并不相同？究竟為什么會(huì)這樣呢？
原來是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。（如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料）
（1）在IE 6以及后續(xù)版本，冒泡事件支持的層級(jí)達(dá)到document對(duì)象。
（2）在firefox（準(zhǔn)確的說應(yīng)該是Mozilla1.0以及更高版本），對(duì)冒泡事件的支持一直上升到window窗口對(duì)象。
于是就造成了上面事件響應(yīng)結(jié)果的不同。
另外，有個(gè)有意思的地方不知道你注意到了沒有？就是事件目標(biāo)的響應(yīng)順序。（冒泡事件的響應(yīng)順序。。。好像有點(diǎn)廢話）我們知道，firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。在這里明顯事件處理函數(shù)作用在了冒泡階段。也就是說，如果我們采用傳統(tǒng)的直接給事件處理函數(shù)屬性賦值的話，比方說：
復(fù)制代碼 代碼如下:
document.body.onclick=func;
事件處理函數(shù)將被添加到事件的冒泡階段。
以上就是對(duì)于IE、firefox里面冒泡事件響應(yīng)層級(jí)的一點(diǎn)介紹，同時(shí)順帶介紹了采用傳統(tǒng)事件處理函數(shù)直接賦值的默認(rèn)處理。詳細(xì)的講解可參見大牛Nicholas C. Zakas所著的《javascript高級(jí)程序設(shè)計(jì)》。
PS：以上內(nèi)容僅僅為個(gè)人讀書筆記，如有錯(cuò)漏，隨時(shí)歡迎指正。同時(shí)希望能有更多的前端愛好者們共同分享你們的心得！
您可能感興趣的文章:
- 深入分析js的冒泡事件
- Js冒泡事件詳解及阻止示例
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡(jiǎn)單方法
- JS冒泡事件的快速解決方法
- Js 冒泡事件阻止實(shí)現(xiàn)代碼
- js 冒泡事件與事件監(jiān)聽使用分析
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- javascript事件冒泡和事件捕獲詳解
- js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
- js之事件冒泡和事件捕獲詳細(xì)介紹
- JS冒泡事件與事件捕獲實(shí)例詳解
相關(guān)文章
JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)美食展示與收藏的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-03-03
在web開發(fā)中，防止表單的重復(fù)提交是一個(gè)非常重要的環(huán)節(jié)。重復(fù)提交會(huì)導(dǎo)致數(shù)據(jù)混亂，甚至可能導(dǎo)致系統(tǒng)崩潰，今天我們將帶領(lǐng)大家從小白級(jí)別到大神級(jí)別的程序員，一起來學(xué)習(xí)如何在實(shí)際項(xiàng)目中避免表單的重復(fù)提交2023-04-04
這篇文章主要介紹了HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這是一個(gè)由JS實(shí)現(xiàn)的網(wǎng)頁(yè)密碼保護(hù)代碼，在進(jìn)入網(wǎng)頁(yè)前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺(tái)處理這種功能，用戶輸入用戶名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容2013-04-04
這篇文章主要介紹了一張Web前端的思維導(dǎo)圖分享,本文直接給出思維導(dǎo)圖,圖中詳細(xì)描述了一些需要學(xué)習(xí)的知識(shí)、一些必備的知識(shí),需要的朋友可以參考下2015-07-07
JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊(cè)事件
這篇文章主要介紹了JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊(cè)事件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
js 多種變量定義(對(duì)象直接量，數(shù)組直接量和函數(shù)直接量)
js 多種變量定義(對(duì)象直接量，數(shù)組直接量和函數(shù)直接量),大家可以參考下，對(duì)于以后學(xué)習(xí)js 面向?qū)τ谂cjson操作會(huì)有幫助。2010-05-05
Quasar Input:type="number" 去掉上下小箭頭 實(shí)現(xiàn)加減按鈕樣式功能
這篇文章主要介紹了Quasar Input:type="number" 去掉上下小箭頭 實(shí)現(xiàn)加減按鈕樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS一次前端面試經(jīng)歷,結(jié)合具體案例形式分析了JS前端面試過程中遇到的問題以及響應(yīng)的注意事項(xiàng),需要的朋友可以參考下2020-03-03