事件冒泡与捕获详解-优快云博客

什么是事件冒泡?

先初始化页面，页面代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
#content{
	background: #ccc;
}
#content span{
	background: yellow;
	margin: 5px 10px;
}
#msg{
	background: blue;
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(function( ) {
	//为span元素绑定click事件
	$('span').bind('click',function() {
		var txt=$('#msg').html()+"<p>内层span元素被单击</p>";
		$('#msg').html(txt);
	});
	//为div元素绑定clcik事件
	$('#content').bind('click',function(){
		var txt=$('#msg').html()+"<p>外层span元素被单击</p>";
		$('#msg').html(txt);
	});
	//为body元素绑定click事件
	$('body').bind('click',function(){
		var txt=$('#msg').html()+"<p>body元素被单击</p>";
		$('#msg').html(txt);
	});
});
</script>
<body>
<div id="content">
	外层div元素<br/>
	<span>内层span元素</span><br/>
	外层div元素<br/>
</div>
<div id="msg"></div>
</body>
</html>

页面效果如图所示

当我单击内层的span元素的时候，输出记录：

即元素的clcik事件会按照以下顺序来“冒泡”：

<span>
<div>
<body>

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果，比如你只想触发span的click效果，却会无意中触发其外层的div的click效果，这样就很麻烦了，所以，有必要对事件的作用范围进行限制。

如何停止事件冒泡？

停止事件冒泡只需要为函数添加一个参数，并使用jquey中提供的stopPropagation()方法即可。jquey代码如下：

$('span').bind('click',function(event) {
	var txt=$('#msg').html()+"<p>内层span元素被单击</p>";
	$('#msg').html(txt);
	event.stopPropagation();
});

我们可以看到使用这个方法之后，单击内层span元素便实现了我们想要的效果

阻止默认行为

和事件冒泡比较相同的是阻止默认行为，举个例子：

比如你有一个表单，但是当输入的内容不符合要求的时候是不允许提交的，这时候就需要阻止默认行为(提交)。

jquery为我们提供了preventDefault()方法来阻止元素的默认行为。

看个效果吧，代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(function() {
	$("#sub").bind('click',function(event){
		var username=$('#username').val();
		if(username==""){
			$("#msg").html("<p>文本框的值不能为空</p>");
			event.preventDefault();
		}
	});
});
</script>
<body>
<form action="jqtest.html">
	用户名：<input type="text" id="username"/><br/>
	<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>

当用户名为空的时候点击提交按钮会出现以下提示，且表单不能提交。