一个事件冒泡的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('body').click(function () {
alert(4);
});
$('.grandfather').click(function () {
alert(3);
});
$('.father').click(function () {
alert(2);
});
$('.son').click(function () {
alert(1);
});
})
</script>
<style type="text/css">
.grandfather{
300px;
height:300px;
background-color: gold;
position: relative;
}
.father{
200px;
height:200px;
background-color: hotpink;
}
.son{
100px;
height:100px;
background-color: chartreuse;
position: absolute;
left:0;
top:400px;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
事件冒泡有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止
$('body').click(function (event) {
alert(4);
event.stopPROpagation();
});
阻止默认行为：（阻止右键菜单）
$(document).contextmenu(function(event){ event.preventDefault(); })
合并阻止操作：
实际开发中一般把阻止冒泡和阻止默认行为合并起来写
return false；
eg：（弹框--阻止冒泡）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#pop').show();
return false;
});
$('#shutoff').click(function () {
$('#pop').hide();
});
$(document).click(function (event) {
$('#pop').hide();
});
$('.pop').click(function () {
return false;
})
})
</script>
<style type="text/css">
.pop_con{
/*暂时隐藏*/
display: none;
}
.pop{
300px;
height:200px;
background-color: #fff;
border:1px solid #000;
/*使框居中*/
position: fixed;
left:50%;
top:50%;
margin-left:-150px;
margin-top: -100px;
/*让弹窗覆盖在mask上面*/
z-index:9999;
}
.mask{
position: fixed;
100%;
height: 100%;
background-color: #000;
left:0;
top:0;
/*设置透明度*/
opacity:0.3;
/*ie兼容的透明度*/
filter:alpha(opacity=0.3);
/*让弹窗覆盖在mask上面*/
z-index:9990;
}
</style>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p>
<input type="button" name="" value="弹出" id="btn">
<!--自制弹框-->
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutoff">关闭</a>
<input type="text" name="">
</div>
<div class="mask">mask</div>
</div>
</body>
</html>
事件委托：利用事件冒泡原理把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也拥有相同的操作。
<script type="text/javascript">
<!--事件委托写法-->
$(function () {
$('.list').delegate('li','click',function () {
alert($(this).html());
//取消委托
$('.list').undelegate();
}); }) </script>