事件冒泡是什么以及怎么规避事件冒泡（转）

参考链接：https://baike.baidu.com/item/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/4211429

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

 

什么是事件冒泡

编辑
页面上有好多事件，也可以多个元素响应一个事件.假如:
1
2
3
4
5
6
7
<BODY onclick="alert('aaa');">
<div onclick="alert('bbb');">
 <a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');">
   提示
  </a>
</div>
</BODY>
上面这段代码一共有三个事件,body，div，a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是：a --> div --> body 。a冒泡到div冒泡到body。

事件冒泡引发的问题

编辑
本来在上面的代码中只想触发<a>元素的onclick事件，然而<div>,<body>事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递，我们可以用 event.stopPropagation()阻止事件的传递行为.

stopPropagation阻止事件冒泡实现

编辑
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
<html>
 <head> 
<meta charset = "utf-8" > 
<script type = "text/javascript" >
var onBodyClickFn = function() {
        alert("我是body上事件");
}
window.onload = function() {
        var body = document.body;
        body.addEventListener('click', onBodyClickFn, false); // false 冒泡阶段
        //停止事件冒泡
        document.getElementById("stopBubble").addEventListener("click",
        function(event) {
                alert("我是stopBubble_btn上事件");
                event.stopPropagation();
        },
        false);
 
        //正常事件冒泡
        document.getElementById("bubble").addEventListener("click",
        function() {
                alert("我是bubble_btn上事件");
        },
        false);
}; < /script>
</head > <body > <button id = 'stopBubble' > 阻止冒泡 < /button>
<button id="bubble">正常事件冒泡</button > </body>
</html> 

jQuery对这个问题进行了必要的扩展和封装

编辑
1
2
 $("element").bind("click",function(event){     
 //event为事件对象    //.........   event.stopPropagation();   //停止事件冒泡  });

阻止默认行为

编辑
网页中的某些元素是有自己的默认行为的，比如果超链接单击后需要跳转，提交按钮点击后需要提交表单，有时需要阻止这些行为，也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.
1
2
3
4
5
6
7
8
$('#submit').bind('click',
function(event) {
    var username = $('#username').val();
    if (username == "") {
        alert('用户名不能为空!');
        event.preventDefault(); //阻止默认行为  
    }
})

jquery中对冒泡和默认行为的阻止方法

编辑
jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果
1
2
event.preventDefault();  改写为：  return false;
event.stopPropagation();  改写为：  return false;
posted @ 2017-09-29 11:48  guodaxia  阅读(313)  评论(0)    收藏  举报