javascript事件冒泡是我·圖文實例

1. 事件

在瀏覽器用戶端套用平台，一般專業皆以事件驅動的，即某個事件發生，然後做出對應的動作。

瀏覽器的事件所表示的是某些事情所發生的訊號。事件的闡述不是本文的重點，尚未了解的朋友，可以訪問W3school教程 進行了解，這將有助於更好地理解以下的內容 。

2.冒泡機制

為冒泡呢？

下面這個圖片大家應該心領神會吧，氣泡從水底開始往上升，由深到淺，升到最上面。在上升的過程中，氣泡會經過不同深度的水。

#相對應地：這個氣泡相當於我們這裡的事件，而水則相當於我們整個的dom樹；事件從dom 樹的底層層層往上傳遞，直至傳遞到dom的根節點。

簡單案例分析

下面透過一個簡單的範例案例來闡述冒泡原則：

定義一個html, 裡面有三個簡單的dom元素：div1,div2, span，div2包含span，div1 包含div2；而它們都在body 下：

#? ##? ##? ##? ##? ##1 2 3 4 5 6 7 "body" > ### ######### ###### ############ ###### This is a span.&lt ;/span>############ ###### ############ ###### ############ ###################### 介面原型如下：

a. body加入click 事件監聽，當body擷取到event事件時，列印出事件發生的時間和觸發事件的節點資訊：

##?

##1 2 3 #4 5 ##6 #7 8 "text/javascript" > #window.onload = function ##() { document.getElementById( "body" ).addEventListener( "click" #,eventHandler) ; } # function eventHandler(event) { console.log( #"時間：" + new Date(event.timeStamp)+ " 產生事件的節點：" + event.target.id + " 目前節點：" +event.currentTarget.id); #} 當我們依序點選"This is span"，div2，div1，body後，輸出下列資訊：

#分析以上的結果：

無論是body，body 或 body的子元素div1，或是div2，以及當這些元素被點擊click時，都會產生click事件，並且body都會捕獲到，然後呼叫對應的事件處理函數。就像水中的氣泡從底往上冒一樣，事件也會往上傳遞。

事件傳遞的示意圖如下：

## 發生的時間+事件發生的地點+ 事件的類型+事件的當前處理者+其他信息，

完整的html代碼如下：

#? 1 2 ##3 #4 5 6 7 8 9 10 # 11 12 13 14 #15 #16 #17 ##18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 #47 # "UTF-8" > # "text/javascript" src= "js/jquery-1.11.0.js?1.1. 11" > # Insert title here "text/css" > .box1 { 邊框：綠色40 像素實線； # 寬度：300 像素； # 高度：300px; 邊距：自動; #} ## ##.box2 { # 邊框：黃色40 像素實線； # 寬度：220像素； # 高：220像素； ## 邊距：自動; } # #span { 位置：相對; # 左：50px; # 上：50px; # ##} # # ## "text/javascript" > window.onload = function () { # document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function #eventHandler (event) { ## console.log( "時間：" ##+ new Date(事件.timeStamp)+ " 產生事件的節點：" + event.target.id + " 目前節點：" +event. currentTarget.id); } ######### ########## ###### ###### "box2" #class= "box2" ##> ; "span" >這是一個跨度。 ## # ## b.終止事件的冒泡

我們現在想實現這樣的功能，在div1 點擊的時候，彈出」你好，我是最外層div。

由此我們會有下面的javascript片段：

? 1 2 3 4 5 ##6 7 #8 9 10 11 12 13 ## "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , #function #(event){ alert( "您好，我是最外層div。" ); }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "您好，我是第二層div。" ); # ##}); document.getElementById( "span" ).addEventListener( "click" , function (event){ # alert( "你好，我是span。 } 預期上述程式碼會點擊span 的時候，會出來一個彈出框"您好，我是span。" 是的，確實彈出了這樣的對話框：

然而，以該對話框，點選確定後，依序彈出下列對話方塊：

##這顯然不是我們想要的！ 我們希望的是點誰顯示誰的資訊而已。為什麼會出現上述的情況呢？ 原因就在於事件的冒泡，點擊span的時候，span 會把產生的事件往上冒泡，作為父節點的div2 和祖父節點的div1也會收到此事件，於是會做出事件回應，執行回應函數。現在問題是發現了，但是要怎麼解決呢？ 方法一：我們來考慮一個形像一點的情況：水中的一個氣泡正在從底部往上冒，而你現在在水中，不想讓這個氣泡往上冒，怎麼辦呢？ ——把它刺破！沒了氣泡，自然不會往上冒了。類似地，對某節點而言，如果不想它現在處理的事件繼續往上冒泡的話，我們可以終止冒泡：

在對應的處理函數內，加入 event.stopPropagation() ,終止事件的廣播分發，這樣事件停留在本節點，不會再往外傳播了。修改上述的script片段：

?

#1 2 3 4 5 6 #7 8 ##9 #10 11 12 13 14 15 16 # "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( #"您好，我是最外層div。" #); event.stopPropagation(); #}); document.getElementById( "box2" ).addEventListener( "click" #, function (event){ alert( "你好，我是第二層div。 }); document.getElementById( "span" ).addEventListener( "click" , #function #(event){ alert( "你好，我是span。" ); event.stopPropagation();############ #######});############ ######}#### ######## ###################### 經過這樣一段程式碼，點選不同元素會有不同的提示，不會出現彈出多個方塊的狀況了。

方法二：事件包含最初觸發事件的節點引用 和 目前處理事件節點的引用，那麼如果節點只處理自己觸發的事件即可,不是自己產生的事件不處理。 event.target 引用了產生此event物件的dom 節點，而event.currrentTarget 則引用了目前處理節點，我們可以透過這 兩個target 是否相等。

例如span 點選事件，產生一個event 事件對象，event.target 指向了span元素，span處理此事件時，event.currentTarget 所指向的也是span元素，這時判斷兩者相等，則執行對應的處理函數。而事件傳遞給 div2 的時候，event.currentTarget變成 div2，這時候判斷二者不相等，也就是事件不是div2 本身產生的，就不作回應處理邏輯。

? #1 2 #3 4 5 6 7 #8 9 10 11 12 13 14 15 16 17 18 19 20 21 #22 23 "text/javascript" #> window .onload = function ##() { # document.getElementById( #"box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) #{ alert( #"您好，我是最外層div." ); # } }); # #document.getElementById( "box2" ).addEventListener(######"click"######,#######function### ###(event){############ ######if######(event.target == event.currentTarget)########## #### ######{############ ######alert(######"你好，我是第二層div。"# #####);###### } }); #document.getElementById( "span" ).addEventListener( "點擊" , #function (事件){ if (event.target == event.currentTarget) # { alert( "您好，我是跨度。" ); # ## } #});############ ######}############腳本>############# # ############### 比較：

從事件傳遞來看：方法一在於取消事件冒泡，即當某些節點取消冒泡後，事件不會再傳遞；方法二在於無法阻止冒泡，過濾需要處理的事件，事件處理後還會繼續傳遞；

優缺點：

方法一缺點：為了實現點選特定的元素所顯示的訊息，方法一要求每個元素的子元素也必須終止事件的冒泡傳遞，即跟別的元素功能上強關聯，這樣的方法會很脆弱。例如，如果span 元素的處理函數沒有執行冒泡終止，則事件會傳到div2 上，這樣會造成div2 的提示訊息；

方法二缺點：方法二為每個元素增加了事件監聽處理函數，事件的處理邏輯都很相似，即都有判斷if(event.target == event.currentTarget)，這樣存在了很大的程式碼冗餘，現在是三個元素還好，當有10幾個，上百個該怎麼辦呢？ 還有就是為每一個元素都有處理函數，在某種程度上增加邏輯和程式碼的複雜度。

我們再來分析方法二：方法二的原理是元素收到事件後，判斷事件是否符合要求，然後做對應的處理，然後事件繼續冒泡往上傳遞； 是冒泡傳遞的，那可不可以讓某個父節點統一處理事件，透過判斷事件的發生地（即事件產生的節點），然後再做出相對應的處理呢？答案是可以的，下面透過為body 元素添加事件監聽，然後透過判斷event.target 然後對不同的target產生不同的行為。

將方法二的程式碼重構：

##? #1 2 3 4 5 #6 7 8 9 10 11 12 13 14 15 16 17 18 19 ## "text/javascript" > # window.onload = function #() { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); # } ## #function eventPerformed(event) { # var target = event.target; switch (target.id) { case "span" : alert( "您好，我是span。" ); break ; # case "div1" #: alert( "您好，我是第二層div。" ); # break ; case "div2" : alert( "您好，我是最外層div。" #); break ; } } ## 結果會被點擊不同的元素，只彈出相符合的提示，不會有多餘的提示。

透過以上方式，我們把原本每個元素都要有的處理函數，都交給了其祖父節點body 元素來完成了，也就是說，span,div2,div1 將自己的回應邏輯委託給body，讓它完成對應邏輯，自己不實作對應邏輯，這個模式，就是所謂的事件委託。

以下為示意圖：

javascript事件冒泡是我·圖文實例

相關文章