第09章事件对象（上）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件对象</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<input type="button" value="按钮" />
<input type="text" value="按钮" />

<div style="width:200px; height:200px; background:#ccc;">
	<span style="width:100px;  height:100px; background:#eee; display:block;"></span>
</div>

<p style="height:2000px;"></p>

</body>
</html>

demo.js

$(function(){
	/*
	$('input').bind('click',function(e){
		alert(e);
	});
	
	$('input').bind('click',function(e){
		//alert(e.type);
		//alert(typeof e.type);
	});
	
	$('input').bind('click',function(e){
		alert(e.target);
	});
	
	$('input').bind('click',function(e){
		alert(e.relatedTarget);
	});
	
	$('input').bind('click',function(e){
		alert(e.currentTarget);
	});
	
	$('div').bind('click',function(e){
		alert(e.target);
	});
	
	$('div').bind('click',function(e){
		alert(e.currentTarget);
	});
	//target 是获取触发元素的 DOM，触发元素，就是你点了哪个就是哪个
	//currentTarget 得到的是监听元素的 DOM，你绑定的哪个就是那个
	
	$('span').bind('mouseover',function(e){
		alert(e.relatedTarget);
	});
	
	$('div').bind('click',function(e){
		alert(this == e.currentTarget);
	});
	
	$('div').bind('click',function(e){
		alert(this == e.target);
	});
	
	$('div').bind('click',123,function(e){
		alert(e.data);
	});
	
	$('div').bind('click','abc',function(e){
		alert(e.data);
	});
	
	$('div').bind('click',[1,2,3,'a','b'],function(e){
		alert(e.data[3]);
	});
	
	$('div').bind('click',{user:'Lee',age:100},function(e){
		alert(e.data.age);
	});
	
	$(document).bind('click',function(e){
		alert(e.pageX+','+e.screenX+','+e.clientX);
	});
	
	$(document).bind('click',function(e){
		alert(e.pageY+','+e.screenY+','+e.clientY);
	});
	
	$('input').bind('click',function(e){
		return 123;
	});
	
	$('input').bind('click',function(e){
		alert(e.result);
	});
	
	$('input').bind('click',function(e){
		return 123;
	});
	
	$('input').bind('click',function(e){
		alert(e.result);
	});
	
	$('input').bind('click',function(e){
		alert(e.timeStamp);
	});
	
	$('input').bind('mousedown',function(e){
		alert(e.which);
	});
	
	$('input').bind('keyup',function(e){
		alert(e.which);
	});
	*/
	
	$('input').bind('click',function(e){
		alert(e.ctrlKey);
	});
	
});

第09章 事件对象（上）

猜你喜欢

第09章事件对象（上）