快捷導(dǎo)航

關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)

更新時(shí)間：2010年10月14日 00:04:13 作者：

原來(lái)是由于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è)面加入這么一段腳本：

復(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下打開(kāi)頁(yè)面，在標(biāo)簽testDiv（灰色方塊）上單擊，結(jié)果分別如下截圖：

　　
firefox下結(jié)果

IE 8下結(jié)果

可以看到，兩者結(jié)果并不相同？究竟為什么會(huì)這樣呢？
原來(lái)是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。（如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料）
（1）在IE 6以及后續(xù)版本，冒泡事件支持的層級(jí)達(dá)到document對(duì)象。
（2）在firefox（準(zhǔn)確的說(shuō)應(yīng)該是Mozilla1.0以及更高版本），對(duì)冒泡事件的支持一直上升到window窗口對(duì)象。
于是就造成了上面事件響應(yīng)結(jié)果的不同。

另外，有個(gè)有意思的地方不知道你注意到了沒(méi)有？就是事件目標(biāo)的響應(yīng)順序。（冒泡事件的響應(yīng)順序。。。好像有點(diǎn)廢話）我們知道，firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。在這里明顯事件處理函數(shù)作用在了冒泡階段。也就是說(shuō)，如果我們采用傳統(tǒng)的直接給事件處理函數(shù)屬性賦值的話，比方說(shuō)：

復(fù)制代碼代碼如下:

document.body.onclick=func;

事件處理函數(shù)將被添加到事件的冒泡階段。

以上就是對(duì)于IE、firefox里面冒泡事件響應(yīng)層級(jí)的一點(diǎn)介紹，同時(shí)順帶介紹了采用傳統(tǒng)事件處理函數(shù)直接賦值的默認(rèn)處理。詳細(xì)的講解可參見(jiàn)大牛Nicholas C. Zakas所著的《javascript高級(jí)程序設(shè)計(jì)》。

PS：以上內(nèi)容僅僅為個(gè)人讀書筆記，如有錯(cuò)漏，隨時(shí)歡迎指正。同時(shí)希望能有更多的前端愛(ài)好者們共同分享你們的心得！

您可能感興趣的文章: