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

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>

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

备注: click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件

click方法中的function代码会在onclick事件执行完后执行,此时click方法起到追加事件的作用 【第2个按钮BBB的演示可以看出】

猜你喜欢

转载自blog.csdn.net/Coder_Boy_/article/details/81431122