讲给后台程序员看的前端系列教程(57)——jQuery事件绑定及其处理

最新推荐文章于 2023-03-27 14:44:42 发布

谷哥的小弟

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量626

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： jQuery 事件处理绑定与解绑

本文链接：https://blog.csdn.net/lfdfhl/article/details/102660199

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在本节教程中，我们重点关注jQuery框架中常见的事件绑定及其处理。

jQuery标准的事件绑定

语法如下：

jQuery对象.事件方法(回调函数);

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery事件绑定及其处理1</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//点击事件
				$("#blog").click(function () {
					alert("click");
				});
				//鼠标移入事件
				$("#welcome").mouseover(function () {
					alert("mouseover");
				});
				//鼠标移出事件
				$("#welcome").mouseout(function () {
					alert("mouseout");
				});
				
				//事件处理的链式写法
				$("#bye").mouseover(function () {
					alert("mouseover");
				}).mouseout(function () {
					alert("mouseout");
				});
				
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
		<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
	</body>
</html>

在这里插入图片描述

利用on和off进行绑定和解绑

语法如下：

jQuery对象.on("事件名称",回调函数);

jQuery对象.off("事件名称");

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery事件绑定及其处理2</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//利用on绑定点击事件
				$("#welcome").on("click",function () {
					alert("welcome clicked");
				});
				
				$("#bye").on("click",function () {
					//利用off解除点击事件的绑定
					$("#welcome").off("click");
				});
				
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
		<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
	</body>
</html>

利用bind和unbind进行绑定和解绑

语法如下：

jQuery对象.bind("事件名称",回调函数);

jQuery对象.unbind("事件名称");

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery事件绑定及其处理3</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//利用bind绑定点击事件
				$("#welcome").bind("click",function () {
					alert("welcome clicked");
				});
				
				$("#bye").on("click",function () {
					//利用unbind解除点击事件的绑定
					$("#welcome").unbind("click");
				});
				
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
		<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
	</body>
</html>