2019獨角獸企業重金招聘Python工程師標準>>>

瀏覽器的事件冒泡

當事件發生后，這個事件就要開始傳播。例如我們點擊一個按鈕時，就會產生一個click事件，但這個按鈕本身不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中。從里到外，直至它被處理，或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

? IE 5.5: div -> body -> document

? IE 6.0: div -> body -> html -> document

? Mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然后到最精確的對象

（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

DOM2.0模型將事件處理流程分為三個階段：一、事件捕獲階段，二、事件目標階段，三、事件起泡階段。如圖：

事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨著DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函數是不會被觸發的。

事件目標：當到達目標元素之后，執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數，那就不執行。

事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

每個 event 都有一個event.bubbles屬性，可以知道它可否冒泡。

JS事件代理

對于需要給很多列表式元素添加事件時，可以直接將事件添加到它們的父節點，將事件委托給父節點來觸發處理函數。利用瀏覽器的事件冒泡機制實現單個元素事件處理

假設有一個ul?的父節點包含一些列li的子節點，希望實現的效果是：鼠標移到li上時彈出懸浮窗，即li需要出發處理事件，通常寫法是給每個li綁定onclick等監聽事件。

//html： <ul id="parent"><li id="child1">Item 1</li><li id="child2">Item 2</li><li id="child3">Item 3</li><li id="child4">Item 4</li><li id="child5">Item 5</li> </ul>

js代碼：

//js： function addListeners(li_child){li_child = function clickHandler(){...}; }window.onload = function(){var ul_parent = document.getElementById("parent");var li_childs = ulNode.getElementByTagName("li");for(var i=0, l = li_childs; i < l; i++){addListener(li_childs[i]);} }

如果這個ul中的li子元素會頻繁地添加或者刪除，我們就需要在每次添加li的時候都調用這個addListener方法來為每個li節點添加事件處理函數。這就添加的復雜度和出錯的可能性。

更簡單的方法是使用事件代理機制，當事件被拋到更上層的父節點的時候，我們通過檢查事件的目標對象（target）來判斷并獲取事件源Li。下面的代碼可以完成我們想要的效果：

// 獲取父節點，并為它添加一個click事件 document.getElementById("parent").addEventListener("click",function(e) {// 檢查事件源e.targe是否為Liif(e.target && e.target.nodeName.toUpperCase == "li") {// 真正的處理過程在這里...} });

為父節點添加一個click事件，當子節點被點擊的時候，click事件會從子節點開始向上冒泡。父節點捕獲到事件之后，通過判斷e.target.nodeName來判斷是否為我們需要處理的節點。并且通過e.target拿到了被點擊的Li節點。從而可以獲取到相應的信息，并作處理。

jQuery中delegate函數

delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數，使用 delegate() 方法的事件處理程序適用于當前或未來的元素(比如由腳本創建的新元素)。

$("#parent").delegate("li", "click", function(){// "$(this)" is the node that was clicked... });

jQuery的delegate的方法需要三個參數，一個選擇器，一個時間名稱，和事件處理函數。

優點

通過上面的介紹，大家應該能夠體會到使用事件委托對于web應用程序帶來的幾個優點：

1.管理的函數變少了。不需要為每個元素都添加監聽函數。對于同一個父節點下面類似的子元素，可以通過委托給父元素的監聽函數來處理事件。

2.可以方便地動態添加和修改元素，不需要因為元素的改動而修改事件綁定。

3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的內存泄漏發生的概率。

jquery中對冒泡和默認行為的阻止方法

網頁中的某些元素是有自己的默認行為的，比如果超鏈接單擊后需要跳轉，提交按鈕點擊后需要提交表單，有時需要阻止這些行為，也就是默認行為，jQuery對這個問題進行了必要的擴展和封裝

?$("element").bind("click",function(event){??});???//event為事件對象event.stopPropagation();???//停止事件冒泡??

jquery中可用用preventDefault()的方法來阻止元素的默認行為

$('#submit').bind('click', function(event)?{var?username?=?$('#username').val();if?(username?==?"")?{alert('用戶名不能為空!');event.preventDefault();?//阻止默認行為??}})

jquery中對冒泡和默認行為的阻止方法可以改寫，改寫后能夠達到同樣的效果

event.preventDefault(); 改寫為： return false; event.stopPropagation(); 改寫為： return false;

?

轉載于:https://my.oschina.net/u/3152390/blog/849505

總結

以上是生活随笔為你收集整理的JavaScript事件代理和委托的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。