事件冒泡和如何阻止事件冒泡

Posted on

首先请看如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<span style="font-family:Microsoft YaHei;font-size:10px;"><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。” 是的，确实弹出了这样的对话框
然而，不仅仅会产生这个对话框，当点击确定后，会依次弹出其他对话框.

解决方案:

方法一：我们来考虑一个形象一点的情况：水中的一个气泡正在从底部往上冒，而你现在在水中，不想让这个气泡往上冒，怎么办呢？
你首先想到的肯定就是把它扎破，扎破了自然就不会往上冒了。类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，
我们可以终止冒泡。
加入 event.stopPropagation():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span style="font-family:Microsoft YaHei;font-size:10px;"><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></span>

方法二:事件包含最初触发事件的节点引用 和 当前处理事件节点的引用，那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。

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
方法二
<span style="font-family:Microsoft YaHei;font-size:10px;"><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>

优缺点：

方法一缺点：为了实现点击特定的元素显示对应的信息，方法一要求每个元素的子元素也必须终止事件的冒泡传递，即跟别的元素功能上强关联，这样的方法会很脆弱。比如，如果span 元素的处理函数没有执行冒泡终止，则事件会传到div2上，这样会造成div2 的提示信息；

方法二缺点：方法二为每一个元素都增加了事件监听处理函数，事件的处理逻辑都很相似，即都有判断 if(event.target == event.currentTarget)，这样存在了很大的代码冗余，现在是三个元素还好，当有10几个，上百个又该怎么办呢？还有就是为每一个元素都有处理函数，
在一定程度上增加逻辑和代码的复杂度。

既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.targe然后对不同的target产生不同的行为

重构方法二的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 "box1":
            alert("您好，我是最外层div。");
        break;
        case "box2":
        alert("您好，我是内层div。");
        break;
        }
    }

事件冒泡有什么作用？

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情

0%