Jquery中的事件冒泡
- 事件中的冒泡现象
严格来说，事件在出发后分为两个阶段，一个是捕获，一个是冒泡，但有些遗憾的是，大多数浏览器并不是都支持捕获阶段，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>实现的效果：
代码分析：
为什么在实例中，仅是单击按钮，但却执行了3此同样的程序呢？这是因为事件在执行的过程中存在冒泡现象，即虽然单击的是按钮，但按钮的外围<div>元素的事件也被触发，同时div元素的外围的body元素的事件也随之触发，其整个事件涉及的过程就像水泡一样向外冒，故称为冒泡过程。
- 如何阻止冒泡的发生
通过调用event.stopProPagation()方法就是可以阻止事件的冒泡，修改完成之后，再次点击页面的按钮，其显示的次数为1，即阻止了事件的冒泡，而没有涉及其他外围元素的时间触发。
其实还有一种可以阻止事件的冒泡，那就是return false，在代码已经注释掉了。
PS：最近要开始学习和复习一点东西了，温故而知新嘛，即使再简单的问题，也有可能当时很纠结想不到问题的解决之道。
记于2015年晚20:41
相关推荐
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
tztzyzyz 2020-07-05
delmarks 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
momode 2020-09-11
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28