JQuery中的事件 (四.事件冒泡)

最新推荐文章于 2023-07-22 21:18:06 发布

张大仙是个妖怪

最新推荐文章于 2023-07-22 21:18:06 发布

阅读量772

点赞数 1

分类专栏： # jQuery中的事件文章标签： jQuery JQuery中的事件

本文链接：https://blog.csdn.net/NDKHBWH/article/details/64906502

版权

jQuery中的事件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.产生现象

多个元素相应一个事件.例如网页上有两个元素,其中一个元素嵌套在另一个元素中,并且2着都绑定了click事件,同时body也绑定了click事件,当点击里层元素,也会触发外层元素的点击事件.

2.阻止事件冒泡

(1).事件对象

为函数添加一个参数,这个事件的独有事件对象就创建了,当事件处理函数执行完毕,事件对象就被销毁

(2).停止事件冒泡

使用事件对象调用stp[Propagation()函数

(3).代码示例

$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<div id="msg"></div>
</body>

4.阻止默认行为

网页中元素有自己的默认行为,例如,单机超链接后会跳转,单击提交按钮表单会提交,有时需要阻止元素的默认行为,preventDefault();

$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
		     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
		     event.preventDefault();  //阻止默认行为 ( 表单提交 )
		 }
   })
})
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>

5.阻止默认行为和停止时间冒泡

return false;

$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值
         if(username==""){     //判断值是否为空
		     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
		     return false;
		 }
   })
})
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>

$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>
<div id="msg"></div>