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>
效果截图：
