首页 前端知识 jQuery操作事件(含冒泡现象及解决方案)

jQuery操作事件(含冒泡现象及解决方案)

2024-08-21 10:08:14 前端知识 前端哥 744 340 我要收藏

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>

效果截图:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16345.html
标签
评论
发布的文章

CSS3 动画

2024-04-17 21:04:24

JWT(JSON Web Token)

2024-08-30 03:08:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!