event对象学习

  • event对象获取鼠标坐标
  • event对象获取键盘值
  • 详细属性看W3c 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <html>
    	<head>
    		<title>event对象学习</title>
    		<meta charset="UTF-8"/>
    		<style type="text/css">
    			#showdiv{
    				width: 300px;
    				height: 300px;
    				border: solid 1px;
    				
    			}			
    		</style>
    		<script type="text/javascript">
    			function getMouse(event){
    				//获取event对象
    				var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
    				var x=eve.clientX;
    				var y=eve.clientY;
    				alert(x+":"+y);				
    			}
    			function getKey(event){
    				//获取event对象
    				var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
    				var code=eve.keyCode;
    				alert(code);
    			}
    		</script>
    	</head>
    	<body>
    		<h3>event对象学习</h3>
    		<hr />
    		<div id="showdiv" onmousemove="getMouse(event)">
    			
    		</div>
    		<br /><br />
    		<input type="text" name="" id="" value="" onkeydown="getKey(event)"/>
    	</body>
    </html>
    案例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <html>
    	<head>
    		<title>event案例</title>
    		<meta charset="UTF-8"/>
    		<style type="text/css">
    			
    			#showdiv{
    				width: 50%;
    				height: 50%;	
    				border: solid 1px;
    				position: absolute;
    				left: 400px;
    			}
    			
    			img{
    				position: absolute;
    			}
    		</style>
    	
    		
    	</head>
    	<body>
    		<div id="showdiv" >
    		<script>
    		var img=document.createElement("img");
    		img.src="img/wdfj.gif";
    		img.style.left="100px";
    		img.style.top="100px"
    		document.getElementById("showdiv").appendChild(img);

    		//创建函数
    			function planemove(event){
    				//创建event对象
    				var eve =event ||window.event;
    				//获取坐标
    				var x=eve.clientX-400;
    				var y=eve.clientY;
    				//动态修改飞机的位置
    				img.style.left=x-33+"px";
    				img.style.top=y-40+"px";
    				if(x<0){
    					document.removeEventListener("mousemove",planemove,true);
    				}
    			}
    		document.addEventListener("mousemove",planemove,true);
    		</script>
    		</div>
    	</body>
    </html>
    wdfj.gif