硬核解析，巧用案例学习jQuery框架三种事件绑定方式
Posted 灰小猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了硬核解析，巧用案例学习jQuery框架三种事件绑定方式相关的知识，希望对你有一定的参考价值。
Hello，你好呀！我是灰小猿！一个超会写bug的程序猿！
在jquery框架的使用中，难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作，进行事件的绑定能够增加页面的交互效果，相信在html和js中进行事件的绑定大家都不陌生，那么今天我就来和小伙伴们分享一下利用jquery如何进行事件的绑定！
Jquery中有三种基本的事件绑定方式，那么我们就以三个小案例的形式来分别和大家讲一下这三种基本的事件绑定方式。
一、 jquery标准的绑定方式
Jquery框架的标准绑定的语法是：
jq对象.事件方法(回调函数)；
如：
Jquery对象.cilck();点击事件
Jquery对象.mouseover();鼠标移入时触发
Jquery对象.mouseout();鼠标移出时触发
表单对象.submit();//让表单提交***
在这里需要注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
如下面的实例：鼠标移入时触发弹窗，移出时再触发弹窗事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 设置入口函数
$(function () {
// 设置点击相应事件
/*$("#name").click(function () {
alert("鼠标点击了~");
});*/
// 利用jQuery对象获取鼠标移入和移出响应事件
// 鼠标移入
$("#name").mouseover(function () {
alert("鼠标进入了1~");
});
// 鼠标移出
$("#name").mouseout(function () {
alert("鼠标移除了~");
});
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
效果如下：
二、on绑定事件/off解除绑定
利用jquery的on()方法可以将的一个事件绑定到jquery对象上，
语法格式如下：
jq对象.on("事件名称",回调函数)
利用jquery的off()方法可以将的一个事件从jquery对象上解绑。
语法格式如下：
jq对象.off("事件名称")
注意：如果off方法不传递任何参数，则将组件上的所有事件全部解绑，
如下面的实例：为第一个按钮绑定一个弹窗事件，点击按钮触发弹窗，点击第二个按钮，解除第一个按钮的弹窗事件，当再点击第一个按钮的时候就不会触发弹窗了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 使用on方法给第一个按钮添加事件绑定
$("#btn").on("click",function () {
alert("我被点击了..")
});
// 解除第一个按钮的绑定事件
$("#btn2").click(function () {
alert("第一个按钮解绑了~")
// 解除绑定事件
// $("#btn").off("click")
// 解除所有绑定
$("#btn").off();
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
效果如下：
三、事件切换：toggle
Jquery中的事件切换方法可以实现方法中定义的多个事件的循环触发。语法格式如下：
jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…依次执行下去，当执行完之后会重新从第一个事件开始执行。
在这里要提醒一下大家：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。在中添加以下代码即可添加插件：
script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
下面看这个实例：
点击按钮触发toggle()方法，并修改div的背景颜色
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// toggle函数只能用于1.xx版本，使用时需要引入插件
$("#btn").toggle(function () {
// 切换myDiv的背景颜色
$("#myDiv").css("backgroundColor","green");
},function () {
$("#myDiv").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>
效果如下：
以上就是jQuery框架中实现事件绑定的三种方式，
有问题的小伙伴记得在评论区留言提出！
觉得不错记得点赞关注哟！之后继续和大家分享应用jquery框架的实战案例！
我是灰小猿！我们下期见！
以上是关于硬核解析，巧用案例学习jQuery框架三种事件绑定方式的主要内容，如果未能解决你的问题，请参考以下文章