JavaScript和jQuery中绑定事件的方式

最新推荐文章于 2023-09-25 07:28:36 发布

原创最新推荐文章于 2023-09-25 07:28:36 发布 · 502 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript和jQuery中绑定事件的方式

jQuery 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了JavaScript和jQuery中绑定事件的方式。JavaScript可直接在标签中或用对象绑定事件；jQuery能通过click、bind方法绑定一个或多个事件，还介绍了用unbind方法取消事件绑定，并给出示例及运行结果分析。

文章目录

一、JavaScript中绑定事件的方式

1、直接在标签中绑定事件

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function test(){
				alert("在标签中绑定事件");
			}
		</script>
	</head>
	<body>
		<a href="###" onclick="test()">点击我</a>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

2、使用JavaScript对象绑定事件

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<a id="demo" href="###">点击我</a>
		<script>
			document.getElementById("demo").onclick=function(){
				alert("原生JavaScript代码实现");
			}
		</script>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

二、jQuery中绑定事件的方式

1、使用jQuery对象中的click方法

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a id="demo" href="###">点击我</a>
		<script>
			$("#demo").click(function(){
				alert("使用jQuery中的click方法实现");
			})
		</script>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

2、使用jQuery对象中的bind方法(绑定一个事件)

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a id="demo" href="###">点击我</a>
		<script>
			$("#demo").bind("click",function(){
				alert("使用jQuery中的bind方法实现");
			})
		</script>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

3、使用jQuery对象中的bind方法(绑定多个事件)

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span id="demo">小桥流水人家</span>
		<script>
			$("#demo").bind({
				mouseover:function(){
					$("#demo").css("color","red");
				},
				mouseout:function(){
					$("#demo").css("color","blue");
				}
			})
		</script>
	</body>
</html>

运行结果如下图：
当鼠标移到标签上时，显示为红色：
在这里插入图片描述
当鼠标从标签上移走时，显示为蓝色：

三、jQuery中取消事件绑定的方式

使用jQuery对象中的unbind方法，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a id="demo" href="###">点击我</a>
		<script>
			$("#demo").bind({
				click:function(){
					alert("使用jQuery对象的bind方法");
				}
			});
			$("#demo").unbind();
		</script>
	</body>
</html>

运行结果如下图：
在这里插入图片描述
运行结果分析：使用jQuery对象中的unbind方法后，点击后没有弹窗出现，即绑定的事件没有发生。