淺談javascript中的事件冒泡和事件捕獲
1.事件冒泡
IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。以下面的HTML 頁面為例：
<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
如果你單擊了頁面中的<div>元素，那么這個click 事件會按照如下順序傳播：
(1) <div>
(2) <body>
(3) <html>
(4) document
也就是說，click 事件首先在<div>元素上發(fā)生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直至傳播到document 對象。圖13-1 展示了事件冒泡的過程。
所有現代瀏覽器都支持事件冒泡，但在具體實現上還是有一些差別。IE5.5 及更早版本中的事件冒泡會跳過<html>元素（從<body>直接跳到document）。IE9、Firefox、Chrome 和Safari 則將事件一直冒泡到window 對象。
2.事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲（event capturing）。事件捕獲的思想是不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。如果仍以前面的HTML 頁面作為演示事件捕獲的例子，那么單擊<div>元素就會以下列順序觸發(fā)click 事件。
(1) document
(2) <html>
(3) <body>
(4) <div>
在事件捕獲過程中，document 對象首先接收到click 事件，然后事件沿DOM 樹依次向下，一直傳播到事件的實際目標，即<div>元素。
雖然事件捕獲是Netscape Communicator 唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox 目前也都支持這種事件流模型。
由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議讀者放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了一個簡易的js圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機制可以為類的設計帶來很大的靈活性，相信.net程序員深有體會。隨著web技術發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率2013-08-08
這篇文章主要為大家詳細介紹了js仿QQ郵箱收件人選擇與搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
javascript中數組是沒有indexOf方法，extjs中給數據添加了該方法2012-07-07
如何通過遞歸方法實現用json-diff渲染json字符串對比結果
JsonDiff是一個高性能json差異發(fā)現工具,它幾乎可以發(fā)現任何JSON結構的差異,并且將錯誤信息反饋給用戶,下面這篇文章主要給大家介紹了關于如何通過遞歸方法實現用json-diff渲染json字符串對比結果的相關資料,需要的朋友可以參考下2022-12-12
JS讀取XML文件數據并以table形式顯示數據的方法(兼容IE與火狐)
這篇文章主要介紹了JS讀取XML文件數據并以table形式顯示數據的方法,涉及javascript針對xml節(jié)點操作及HTML表格操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
本篇文章是對JavaScript禁止頁面操作的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JS實現textarea通過換行或者回車把多行數字分割成數組并且去掉數組中空的值
這篇文章主要介紹了JS實現textarea通過換行或者回車把多行數字分割成數組并且去掉數組中空的值的相關資料,需要的朋友可以參考下2018-10-10
在javascript中javascript:void(0)經常會用到，大家知道此含有嗎，在Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，本文給大家介紹js中javascript:void(0) 真正含義，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01