一.事件冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件，比如有这样一个场景，在网页上的body标签中，有两个嵌套的div，这时我们通过代码给
body标签和两个div标签注册click事件，当你单击内层的div时外层的div和body标签的事件也触发的，这就是事件冒泡。
二.如何停止事件冒泡
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /* 构建场景：在body标签中有一div标签在一个div标签中有嵌套一个div标签 现在要给body，第一个div，第二个div标签加上click事件。 */ $(function () { /* 1.当单击内层div时：冒泡的顺序是：总里到外：内层div----外层div-----body 2.当单击内层div时，自身的背景颜色变了，外层div背景颜色也变了甚至连body的背景颜色也变了 3.解决方案： 只需要为函数添加一个参数event即可，当单击某个元素时，事件对象就被创建了，这个事件对象 只有只有事件处理函数才能访问到，事件对象就别销毁。 4.停止事件冒泡： 这里用到了even.stopPropagation（） 5. 可以把 even.stopPropagation();简写成return false */ //给body标签注册单击事件给body标签加上背景颜色 $("body").click(function (even) { $(this).css("background", "blue"); even.stopPropagation(); // return false; }); //给id为menu（外层div）标签注册单击事件给外层div标签加上背景颜色 $("#menu").click(function (even) { $(this).css("background", "red"); even.stopPropagation(); //return false; }); //给id为childen（内层div）标签注册单击事件给内层div标签加上背景颜色 $("#childen").click(function (even) { $(this).css("background", "pink"); even.stopPropagation(); // return false; }); }); </script> </head> <body> 我是body <div id="menu"> 我是外层div <div id="childen">我是内存div</div> </div> </body> </html>
三.阻止默认行为
网页中的元素有自己的默认的行为，例如，单击超链接会跳转，单击提交按钮会提交表单，但我门有时候要阻止这种默认行为，比如，当你点击提交按钮时，用户名为空此时就要
阻止默认行为。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#menu {
500px;
height:500px;
margin:0px auto;
}
</style>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*
阻止默认行为
*/
$(function () {
$("input[type=submit]").click(function (event) {
//获取到文本内容
var name = $("input[type=text]").val();
if (name=="") {
$("#result").html("用户名不能为空！");
event.preventDefault();//阻止默认行为
}
});
});
</script>
</head>
<body>
<form action="/" method="post">
<div id="menu">
用户名：<input type="text" name="name"/>
<input type="submit" name="name" value="提交" />
<div id="result"></div>
</div>
</form>
</body>
</html>
