js和jQuery鼠标绑定点击事件的对比

最新推荐文章于 2023-07-07 16:55:54 发布

Distance-X

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量921

点赞数

分类专栏：前端文章标签： js和jQuery绑定鼠标点击事件

本文链接：https://blog.csdn.net/weixin_43582611/article/details/100588005

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
	</head>
	<script>
		//window.onload和$(function())的区别在于前者页面加载完成之后只加载一次 但是后者可以加载多次
		/*window.onload = function() {
			document.getElementById("btn1").onclick = function() {
				alert("我是js鼠标绑定事件的方式")
			}
		}*/
		$(function(){
			$("#btn1").click(function(){
				alert("我是jQuery绑定鼠标点击事件的方式11111")
			})
				$("#btn1").click(function(){
				alert("我是jQuery绑定鼠标点击事件的方式2222")
			})
		})
		
	</script>

	<body>
		<div id="div1">我是div1</div>
		<div id="div2">我是div2</div>
		<input type="button" value="点击" id="btn1"  />
	</body>
	<script>
		/*$("#btn1").click(function(){
						alert("我是jQuery绑定鼠标点击事件的方式")
					})*/
		/*function test(){
			alert("我是js鼠标绑定事件的方式")
		}*/
		/*document.getElementById("btn1").onclick=function(){
			alert("我是js鼠标绑定事件的方式")
		}*/
	</script>

</html>

代码分析讲解

我们都知道js中鼠标点击事件一般是绑定onclick()这个方法的，代码片段如下图

在这里插入图片描述

第二种：同样是onclick方法，但是我们不用再属性中定义，之间通过标签id，对按钮注入点击方法，代码如下

在这里插入图片描述

通过jQuery方式获取（注意jQuery是没有onclick方法，我查看了文档，文档中并没有，所以直接认为它么有此方法）所以直接用的是click方法（click方法中js也有，不过是先实现onclick方法之后，给click注册监听后才可以使用）

在这里插入图片描述

顶部代码解析

在这里插入图片描述

Distance-X

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js和jQuery鼠标绑定点击事件的对比

代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js"></script> </head> <sc...
复制链接

扫一扫