jQuery操作事件（含冒泡现象及解决方案）

风起携月归

于 2024-08-17 15:56:45 发布

阅读量421

点赞数 18

分类专栏： JavaEE java 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/yjp1240201821/article/details/141281986

版权

JavaEE 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

java

51 篇文章 0 订阅

订阅专栏

jQuery操作事件（含冒泡现象及解决方案）

文章目录

jQuery操作事件（含冒泡现象及解决方案）

一、定义

在jQuery中，事件处理是非常常见和强大的功能。它可以简化对HTML文档中各种事件的处理，例如点击、悬停、键盘输入等。jQuery提供了多种方法来绑定和操作事件，使得处理用户交互变得更加容易。

众所周知，页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用 。

二、事件冒泡现象

1、冒泡现象：子元素的事件向上传递给了父级元素

在页面中创建一个＜div＞标记，并在该标记中创建一个按钮。当用户单击页面按钮时，在页面会弹出一句按钮事件，然后会再弹出div事件。相当于就是一层层往上冒

2、如何阻止冒泡的发生

在jQuery中，可以通过e.stopPropagation()方法可以阻止冒泡过程的发生。

还可以通过语句return false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				width: 200px;
				height: 200px;
				border: orchid 1px solid;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<script type="text/javascript">
			$(function(){
				/**
				 * 冒泡现象：子元素的事件向上传递给了父级元素
				 */
				$("#manager").click(function(){
					alert("div被点击了");
				})
				$("#btn").click(function(event){
					alert("按钮被点击了");
					//阻止冒泡现象 -- 解决方案一
					//event.stopPropagation();
					//阻止冒泡现象 -- 解决方案二
					return false;
				})
			})
		</script>
	</head>
	<body>
		<div id="manager">
			<input id="btn" type="button" value="普通按钮"/>
		</div>
	</body>
</html>

三、绑定事件

使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：

bind(type,[data],fn)

案例：采用bind的方式来为按钮绑定点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<script type="text/javascript">
			$(function(){
				//绑定事件
				$("img").bind({"click":function(){
					console.log("图片被点击了");},
					"mouseout":function(){
						console.log("鼠标移出图片了");
					}
				})
			})
		</script>
	</head>
	<body>
		<img src="img/可爱路飞.jpeg" width="200px" height="200px"/>
	</body>
</html>

四、解绑事件

理解：使用unbind()方法移除元素绑定事件

unbind(type,[fn]])

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<script type="text/javascript">
			$(function(){
				//绑定事件
				$("img").bind("click mouseout",function(){
					console.log("触发事件了");
				})
				$("#btn").click(function(){
					//解绑所有的事件
					//$("img").unbind();
					//解绑指定的事件
					$("img").unbind("click")
				})
			})
		</script>
	</head>
	<body>
		<button id="btn">解绑事件</button><br/>
		<img src="img/可爱路飞.jpeg" width="200px" height="200px">
	</body>
</html>

五、切换事件

hover()方法

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态

一个鼠标事件控制移入和移出，在显示和隐藏之间来回切换

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
		<script type="text/javascript">
			$(function(){
				//切换事件：鼠标移入、移出事件来回切换
				$("img").hover(function(){
					console.log("aaa");
				},
				function(){
					console.log("bbb");
				}
				)
			})
		</script>
	</head>
	<body>
		<img src="img/可爱路飞.jpeg" width="200px" height="200px"/>
	</body>
</html>

六、表单案例

直接上源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{color: red;}
		</style>
	<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
	<script type="text/javascript">
		$(function(){
			var bool = true;
			$("#username").blur(function(){
				if($.trim($(this).val()) ==""){
					$("#username+span").text("账号不能为空");
					bool =false;
				}else{
					$("#username+span").text("");
				}
			})
			$("#password").blur(function(){
				if($.trim($(this).val())==""){
					$("#password+span").text("密码不能为空");
					bool =false;
				}else{
					$("#password+span").text("");
				}
			})
			$("#repassword").blur(function(){
				if($.trim($(this).val())==""){
					$("#repassword+span").text("确认密码不能为空");
					bool = false;
				}else if($.trim($(this).val())!=$.trim($("#password").val())){
					$("#repassword+span").text("确认密码与密码不一致");
					bool =false;
				}else{
					$("#repassword+span").text("");
				}
			})
			$("form").submit(function(){
				bool = true;
				//触发username、password、repassword的失去焦点事件
				$("#username").trigger("blur");
				$("#password").trigger("blur");
				$("#repassword").trigger("blur");
				return bool;
			})
			})
	</script>
	</head>
	<body>
		<form action="#" method="post">
			
			账号：<input type="text" id="username" name="username" /><span></span><br/>
			密码：<input type="password" id="password" name="password" /><span></span><br/>
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>