js事件起泡

最新推荐文章于 2023-04-25 17:01:51 发布

pursuer211

最新推荐文章于 2023-04-25 17:01:51 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

源自:http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

1、什么是javascript事件起泡

对象的层次关系构成了DOM中的对象树。

事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。

2、阻止事件起泡的方法

    function stopBubble(e) {
        if (e && e.stopPropagation) {//非IE
            e.stopPropagation();
        }
        else {//IE
            window.event.cancelBubble = true;
        }
    }

 
3、js事件起泡的验证
这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sun</title>
<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $('.one').click(function(e){
        alert('one');
    });
    
    $('.two').click(function(e){
        alert('two');                                                  
    });                                                                           

    $('.three').click(function(e){
        alert('three');
       //阻止起泡取消下面的注释
        //e.stopPropagation();

    });

});  
</script>
</head>
<body>
<div class="one" style="width:200px;height:200px;background:green;">
one
    <div class="two" style="width:150px;height:150px;background:yellow;">
    two
        <div class="three">
            three
        </div>
    </div>
</div>

</body>
</html>

说明：

1.一个事件起泡对应触发的是上层的同一事件
　单击two的时候就会起泡触发one单击的事件。

单机tree时，会同时触发two，然后触发one
2.如果在click事件中，在你要处理的事件之前加上e.preventDefault();
　那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。

3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。