什么是事件冒泡?
先初始化页面,页面代码如下:
<!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>
当用户名为空的时候点击提交按钮会出现以下提示,且表单不能提交。
如何简写停止冒泡与阻止默认行为的方法
很简单。。
把原来的event.stopPropagation();或event.preventDefault();改写成return false;即可。
顺带一提:事件捕获
事件捕获与冒泡相反,冒泡由内向外,捕获由外向内,比如上文提到的:
即元素的clcik事件会按照以下顺序来“冒泡”:
- <span>
- <div>
- <body>
捕获与之相反,变成:
- <body>
- <div>
- <span>
暂时总结到这里。