Slide 1
Slide 1 text
JQUERY & JAVASCRIPT
冒泡事件
Win take note@20121002
Slide 2
Slide 2 text
以下筆記皆由網路參考
參考網址來自於以下網址：
●
http://www.freezq.cn/article/485.htm
●
http://www.skygq.com/2011/02/08/jquery-stop-propagation/
●
http://www.skygq.com/2011/02/08/jquery-stop-propa
●
http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.htmlgation/
●
http://hzw2312.blog.51cto.com/2590340/780230 （列出瀏覽器的冒泡流程圖）
●
http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.html
Slide 3
Slide 3 text
什麼是冒泡事件?
●
就是事件由底層往上層傳遞，當一個元素的事件被觸發時
(例如click)，同樣的事件將會在那個元素的所有祖先元素中
被觸發，這一個過程被稱為冒泡事件，其過程有如下頁圖。
●
舉例：
●
當在頁面建立了多個div時，相當於建立了父子關係，當父
div與子div共同加入了onclick事件時，當觸發了子div的
onclick事件後，子div進行相應的js操作，但是父div的onclick
事件同樣會被觸發，這就造成了事件的多層觸發，導致頁面
混亂，這就是冒泡事件。(這只是舉例，還有很多事件會造成
冒泡事件，例如mouseover也會造成冒泡事件)
Slide 4
Slide 4 text
HTML
body
div
目標元素(target)
JavaScript事件捕獲與事件冒泡原理
事件捕獲
事件冒泡
useCapture =true useCapture =false
事件捕獲階段：事件從最上一級標籤開始往下查找，直到捕獲到元素目標(target)。
事件冒泡階段：事件從元素目標(target)開始，往上冒泡直到頁面的最上一級標籤。
Slide 5
Slide 5 text
冒泡事件的好處:
●
(1)减少駐留在内存和頁面上的事件處理器,提高性能，降低
瀏覽器崩潰的風險。
●
(2)在DOM更新後不必更新事件，如動態添加元素後無區绑
定事件，删除後也無需删除事件。
●
注意：不是所有事件都可以冒泡的。
Slide 6
Slide 6 text
冒泡事件的缺點:
●
在某些情況下如不阻止事件冒泡會造成混亂，產生非自己想
要的結果。
Slide 7
Slide 7 text
如何阻止冒泡事件？
●
1.event.stopPropagation();
(阻止事件冒泡，但不會阻止默認行為，如a的herf)
Slide 8
Slide 8 text
如何阻止冒泡事件？
●
２.return false();
(阻止事件冒泡，也阻止了默認行為,即a連結不会跳轉)
Slide 9
Slide 9 text
如何阻止冒泡事件？
●
3.event.preventDefault();
這個也是跟冒泡有關的
它的作用是：事件處理過程中，不阻止事件冒泡，但阻止默認行為