JS与jQuery事件绑定总结

最新推荐文章于 2024-09-08 15:03:58 发布

余生为莹

最新推荐文章于 2024-09-08 15:03:58 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/qq_40831381/article/details/90703065

HTML 同时被 3 个专栏收录

7 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文总结了JavaScript和jQuery的事件绑定方式，包括如何通过JavaScript原生方式操作，以及jQuery对象转换为JavaScript对象来实现事件绑定。详细讲解了jQuery中click方法和bind方法的用法，如何绑定单个及多个事件，并探讨了取消事件绑定的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JavaScript

<!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 href="###" onclick="test()">删除</a>
		<script>
			function test(){
				console.log(111);
			}	
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a id="deleteA" href="#">删除</a>
	</body>
	<script>
		document.getElementById("deleteA").onclick = function() {
			alert("删除");
		}
	</script>
</html>

使用JQuery对象转换成JavaScript对象实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		//将JQuery对象转换成JavaScript对象
		$("[href]")[0].onclick = function() {
			alert("删除");
		}
	</script>
</html>

使用JQuery对象绑定事件

1.使用click方法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		$("[href='#']").click(function() {
			alert("JQuery");
		})
</script>
</html>

2.使用bind方法

绑定一个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
		
	</body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
		})
</script>
</html>

绑定多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>		
	</body>
	<script>
		$("[href ='#']").bind({
			click:function(){
				alert("事件一");
			},
			mouseover:function() {
				alert("事件二");
			}
		})
</script>
</html>

取消绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
			$("[href ='#']").unbind();
		})
</script>
</html>