Javascript和jquery事件--事件冒泡和事件捕獲

jQuery 是一個 JavaScript 庫，jQuery 極大地簡化了 JavaScript 編程，在有關jq的描述中，jq是兼容現有的主流瀏覽器，好比谷歌、火狐，safari等（固然是指較新的版本）。在使用jq和js的時候出了很多兼容性問題，也有多是我對二者的瞭解有限形成的，仍是先理清楚二者的事件。

一、  DOM的事件捕獲和事件冒泡—js支持冒泡和捕獲，jq只支持冒泡

提及事件的捕獲和冒泡就要追溯到網景與微軟的「瀏覽器大戰」，不事後來，W3C的規範要求瀏覽器同時支持捕獲和冒泡機制，並容許開發人員選擇把事件註冊到哪一個階段。咱們這個階段只要瞭解怎麼用就能夠了。

當你觸發某個元素的某個事件（如點擊）的時候，事實上，這個元素處於它的父元素、body、html之中，你也同時觸發了這些元素的事件，而冒泡和捕獲兩種模式不一樣的就是事件觸發順序的不一樣。

根據DOM文檔樹來講，事件捕獲的發生的順序從文檔樹的根節點開始，好比點擊肉眼可見的某個元素，事件的觸發順序是：html.clcik->body.click->父元素.click->點擊的元素.click，而事件冒泡則相反，會從子元素開始，觸發順序是：點擊的元素.click ->父元素.click -> body.click -> html.clcik。

咱們經常使用的模式是事件冒泡。

冒泡模式在使用某些事件（如mouseout）的時候有反作用（jq有解決），而某些瀏覽器並不支持捕獲模式，jq不支持事件捕獲。須要使用捕獲模式只能用js。

事件冒泡的反作用出如今mouseout，即鼠標移出元素的事件。如鼠標移出子元素的時候，若是你不作任何操做，它會繼續冒泡，觸發父元素的mouseout事件，即便這時候你的鼠標即便還在父元素內也會觸發父元素綁定的移出事件。你須要在每個mouseout事件阻止事件冒泡。但jQuery提供了mouseenter和mouseleave事件做爲替代來避免這個反作用。

在jq中使用的都是事件冒泡，而js默認使用的是事件冒泡，但提供了事件捕獲的註冊。使用：

　　target.addEventListener(type,fn,true/false);//其中最後一個參數默認是false(冒泡模式)，當你設置true就是捕獲模式

至於冒泡和捕獲觸發的順序，應該是先冒泡再捕獲，本身能夠寫個監聽器測試一下。

 

參考：

http://www.javashuo.com/article/p-ykxjnqis-bd.html

http://www.ituring.com.cn/article/420?q=jQuery%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96