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的演示可以看出】