jQuery 是一個 JavaScript 庫,jQuery 極大地簡化了 JavaScript 編程,在有關jq的描述中,jq是兼容現有的主流瀏覽器,比如谷歌、火狐,safari等(當然是指較新的版本)。在使用jq和js的時候出了不少兼容性問題,也有可能是我對兩者的了解有限造成的,還是先理清楚兩者的事件。
1、 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就是捕獲模式
至於冒泡和捕獲觸發的順序,應該是先冒泡再捕獲,自己可以寫個監聽器測試一下。
參考:
https://www.cnblogs.com/susanws/p/5430777.html
http://www.ituring.com.cn/article/420?q=jQuery%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96
