Jquery中的事件冒泡

郭贝贝编程 2015-03-25

  •  事件中的冒泡现象

严格来说,事件在出发后分为两个阶段,一个是捕获,一个是冒泡,但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,Jquery也不支持,因此在事件触发后,往往执行冒泡过后曾,所谓的冒泡其实质就是事件的执行中的顺序,下面通过一个实例来说明冒泡现象。

实现的源码:

<!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>
    <title>事件中的冒泡现象</title>
    <script type="text/javascript" 
            src="jquery-1.11.1.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .clsShow{border:#ccc 1px solid;background-color:#eee;margin-top:15px;padding:5px;width:220px;line-height:1.8em;display:none}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            var intI = 0; //记录执行次数
            $("body,div,#btnShow").click(function(event) {//点击事件
                intI++; //次数累加
                $(".clsShow")
                .show()//显示
                .html("您好,欢迎来到jQuery世界!")//设置内容
                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
                //event.stopPropagation();//阻止冒泡过程
                //return false;//也能阻止事件的冒泡
            })
        })
    </script>
</head>
<body>
    <div>
        <input id="btnShow" type="button" value="点击" class="btn" />
    </div>
    <div class="clsShow"></div>
</body>
</html>

实现的效果:


Jquery中的事件冒泡

代码分析:

为什么在实例中,仅是单击按钮,但却执行了3此同样的程序呢?这是因为事件在执行的过程中存在冒泡现象,即虽然单击的是按钮,但按钮的外围<div>元素的事件也被触发,同时div元素的外围的body元素的事件也随之触发,其整个事件涉及的过程就像水泡一样向外冒,故称为冒泡过程。

  •  如何阻止冒泡的发生

通过调用event.stopProPagation()方法就是可以阻止事件的冒泡,修改完成之后,再次点击页面的按钮,其显示的次数为1,即阻止了事件的冒泡,而没有涉及其他外围元素的时间触发。

其实还有一种可以阻止事件的冒泡,那就是return false,在代码已经注释掉了。

PS:最近要开始学习和复习一点东西了,温故而知新嘛,即使再简单的问题,也有可能当时很纠结想不到问题的解决之道。

记于2015年晚20:41

相关推荐

Web全栈笔记 / 0评论 2020-06-15