javascript事件冒泡
1. 事件javascript
在瀏覽器客戶端應用平臺，基本生都是以事件驅動的，即某個事件發生，而後作出相應的動做。css
瀏覽器的事件表示的是某些事情發生的信號。事件的闡述不是本文的重點，還沒有了解的朋友，能夠訪問W3school教程 進行了解，這將有助於更好地理解如下的內容 。html
2.冒泡機制java
什麼是冒泡呢？jquery
下面這個圖片你們應該心照不宣吧，氣泡從水底開始往上升，由深到淺，升到最上面。在上升的過程當中，氣泡會通過不一樣深度層次的水。 瀏覽器
相對應地：這個氣泡就至關於咱們這裏的事件，而水則至關於咱們的整個dom樹；事件從dom 樹的底層 層層往上傳遞，直至傳遞到dom的根節點。dom
簡單案例分析函數
下面經過一個簡單的例案例來闡述冒泡原理： spa
定義一個html, 裏面有三個簡單的dom 元素：div1,div2, span，div2包含span，div1 包含div2；而它們都在body 下： .net
|
1
2
3
4
5
6
7
|
<body id=
"body"
>
<div id=
"box1"
class=
"box1"
>
<div id=
"box2"
class=
"box2"
>
<span id=
"span"
>This is a span.</span>
</div>
</div>
</body>
|
界面原型以下：
在這個基礎上，咱們實現下面的功能：
a.body添加 click 事件監聽，當body捕獲到event事件時，打印出事件發生的時間和 觸發事件的節點信息：
|
1
2
3
4
5
6
7
8
|
<script type=
"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);
}
</script><br>
|
當咱們依次點擊"This is span"，div2，div1，body後，輸出如下信息：
分析以上的結果：
不管是body，body 的子元素div1，仍是 div的子元素div2，還有 span, 當這些元素被點擊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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<script type=
"text/javascript"
src=
"js/jquery-1.11.0.js"
></script>
<title>Insert title here</title>
<style type=
"text/css"
>
.box1 {
border: green 40px solid;
width: 300px;
height: 300px;
margin: auto;
}
.box2 {
border: yellow 40px solid;
width: 220px;
height: 220px;
margin: auto;
}
span {
position: relative;
left: 50px;
top: 50px;
}
</style>
<script type=
"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);
}
</script>
</head>
<body id=
"body"
>
<div id=
"box1"
class=
"box1"
>
<div id=
"box2"
class=
"box2"
>
<span id=
"span"
>This is a span.</span>
</div>
</div>
</body>
</html>
|
b.終止事件的冒泡
咱們如今想實現這樣的功能，在div1 點擊的時候，彈出 "你好，我是最外層div。"，點擊div2 的時候，彈出 "你好，我是第二層div"；點擊span 的時候，彈出"您好，我是span。"。
由此咱們會有下面的javascript片斷：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type=
"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。"
);
});
}
</script>
|
預期上述代碼會單擊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
|
<script type=
"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。"
);
event.stopPropagation();
});
document.getElementById(
"span"
).addEventListener(
"click"
,
function
(event){
alert(
"您好，我是span。"
);
event.stopPropagation();
});
}
</script>
|
通過這樣一段代碼，點擊不一樣元素會有不一樣的提示，不會出現彈出多個框的狀況了。
方法二：事件包含最初觸發事件的節點引用 和 當前處理事件節點的引用，那若是節點只處理本身觸發的事件便可,不是本身產生的事件不處理。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
|
<script type=
"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(
"click"
,
function
(event){
if
(event.target == event.currentTarget)
{
alert(
"您好，我是span。"
);
}
});
}
</script>
|
比較：
從事件傳遞上看：方法一在於取消事件冒泡，即當某些節點取消冒泡後，事件不會再傳遞；方法二在於不阻止冒泡，過濾須要處理的事件，事件處理後還會繼續傳遞；
優缺點：
方法一缺點：爲了實現點擊特定的元素顯示對應的信息，方法一要求每一個元素的子元素也必須終止事件的冒泡傳遞，即跟別的元素功能上強關聯，這樣的方法會很脆弱。好比，若是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
|
<script type=
"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
;
}
}
</script>
|
結果會是點擊不一樣的元素，只彈出相符合的提示，不會有多餘的提示。
經過以上方式，咱們把原本每一個元素都要有的處理函數，都交給了其祖父節點body 元素來完成了，也就是說，span,div2,div1 將本身的響應邏輯委託給body，讓它來完成相應邏輯，本身不實現相應邏輯，這個模式，就是所謂的事件委託。
下面是一個示意圖：
轉載！！！