JavaScript和jQuery中绑定事件的方式

最新推荐文章于 2022-09-05 11:46:25 发布

泷憬

最新推荐文章于 2022-09-05 11:46:25 发布

阅读量246

点赞数 1

分类专栏： jQuery 文章标签： JavaScript和jQuery中绑定事件的方式

本文链接：https://blog.csdn.net/it_helianthus/article/details/90710259

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、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方法后，点击后没有弹窗出现，即绑定的事件没有发生。

泷憬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript和jQuery中绑定事件的方式

文章目录一、JavaScript中绑定事件的方式1、直接在标签中绑定事件2、使用JavaScript对象绑定事件二、jQuery中绑定事件的方式1、使用jQuery中的click方法2、使用jQuery中的bind方法(绑定一个事件)3、使用jQuery对象中的bind方法(绑定多个事件)三、jQuery中取消事件绑定的方式一、JavaScript中绑定事件的方式1、直接在标签中绑定事件示例...
复制链接

扫一扫

专栏目录