關于IE浏覽器以及Firefox下冒泡事件的響應層級

假設在我們頁面有這麼一段标簽：

現在在頁面加入這麼一段腳本：

1

2

3

4

5

6

7

8

9

10

11

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>window.onload=</code><code>function</code><code>(){　　</code><code>//在各個層級的元素上綁定事件</code>

<code>　　window.onclick=func;</code>

<code>　　document.onclick=func;</code>

<code>　　document.getelementbyid(</code><code>"timediv"</code><code>).onclick=func;</code>

<code>　　document.body.onclick=func;</code>

<code>}</code>

<code>function</code> <code>func(){　　</code><code>//響應函數，輸出響應的元素</code>

<code>　　document.getelementbyid(</code><code>"timediv"</code><code>).innerhtml+=</code><code>this</code><code>+</code><code>"&lt;br&gt;"</code><code>;</code>

<code>&lt;/script&gt;</code>

在firefox以及ie 8下打開頁面，在标簽testdiv（灰色方塊）上單擊，結果分别如下截圖：

　　

　　　　　　firefox下結果　　　　　　　　　　　　　　　　ie 8下結果

可以看到，兩者結果并不相同？究竟為什麼會這樣呢？

原來是由于ie浏覽器以及firefox對于冒泡型事件的支援層次不同造成的。（如對冒泡事件不是很了解可先查詢相關資料）

（1）在ie 6以及後續版本，冒泡事件支援的層級達到document對象。

（2）在firefox（準确的說應該是mozilla1.0以及更高版本），對冒泡事件的支援一直上升到window視窗對象。

于是就造成了上面事件響應結果的不同。

另外，有個有意思的地方不知道你注意到了沒有？就是事件目标的響應順序。（冒泡事件的響應順序。。。好像有點廢話）我們知道，firefox同時支援兩種事件模型，也就是：捕獲型事件和冒泡型事件。在這裡明顯事件處理函數作用在了冒泡階段。也就是說，如果我們采用傳統的直接給事件處理函數屬性指派的話，比方說：

<code>document.body.onclick=func;</code>

事件處理函數将被添加到事件的冒泡階段。

以上就是對于ie、firefox裡面冒泡事件響應層級的一點介紹，同時順帶介紹了采用傳統事件處理函數直接指派的預設處理。詳細的講解可參見大牛nicholas c. zakas所著的《javascript進階程式設計》。

ps：以上内容僅僅為個人讀書筆記，如有錯漏，随時歡迎指正。同時希望能有更多的前端愛好者們共同分享你們的心得！