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