Web开发基础_JQuery学习_0005_jQuery事件处理

最新推荐文章于 2025-05-08 12:07:36 发布

原创最新推荐文章于 2025-05-08 12:07:36 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文通过实例介绍了jQuery中事件处理的方法，包括如何为不同按钮绑定点击事件，并解释了click方法的作用及其实现机制。

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

jQuery事件处理

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery事件处理</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			//$(function(){})
			//等价于 window.onload = function(){}
			//写多次onload后者会覆盖前者；
		   //写多次$(function(){})都有效；
		   $(function(){
			  	console.log("页面加载后");
			  
			  //给第1个按钮后绑定事件
			  $(":button:first").click(function(){
				  alert(1);
			  });
			  
			  //给第2个按钮后绑定事件
			  //浏览器会自动传入event，用参数接收即可
			  $(":button:eq(1)").click(function(e){
				  console.log(e);
				  alert(e.pageX+","+e.pageY);
			  });
		   });
			
		   function change(){ 
			   alert("bb"); 
		   } 
		</script>
	</head>
	<body>
		<p>
			<input type="button" value="AAA" onclick="">
			<input type="button" value="BBB" onclick="change()">
		</p>
	</body>
</html>

最终页面显示效果：控制台输出