Javascript冒泡事件原理

Transcript

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