js事件入门（5）

最新推荐文章于 2024-08-07 16:11:40 发布

大地飞鸿

最新推荐文章于 2024-08-07 16:11:40 发布

阅读量209

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/keledon/article/details/103564621

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

5.窗口事件

5.1.onload事件

元素加载完成时触发,常用的就是window.onload

window.onload = function(){
    //等页面加载完成时执行这里的代码
}

5.1.resize

当浏览器窗口改变的时候触发

window.onresize = function(){
    alert(1)
}

6.event对象

6.1.什么是event对象？

event对象代表事件的状态，当事件发生的时候用来记录事件的详细信息，类似于飞机的黑匣子。

在ie和chrome中，事件对象（event）是一个内置的全局对象，必须在事件调用的时候才有值，如果没有事件调用，event没有值，

在firefox中event对象没有被定义，如果一个函数被事件调用，那么这个事件函数中的第一个参数就是event对象，这也是标准浏览器下的处理方式，在非标准下，这种方式不被采用

总结：在非标准下，使用被定义好的event内置对象，在标准下使用事件函数中的第一个参数，假设传入的第一个参数为ev，可以用逻辑或做兼容，var ev = ev || event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onunload = function(){
				var oDiv = document.getElementById('box');
				oDiv.onclick = function(ev){
					//这里的ev就是event对象
					//兼容性处理
					var ev = ev || event;
					console.log(ev);
				}
			}
		</script>
	</head>
	<body>
	   <div id="box"></div>
	</body>
</html>

6.2.event对象上的属性 clientX,clientY

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById('box');
			 
				document.onmousemove = function(ev){
					//event对象
					var ev = ev || event;
					//innerHtml表示往div里面添加内容
					oDiv.innerHTML = "clientX:"+ev.clientX+",clientY:"+ev.clientY;
				}
			}
		</script>
		<style type="text/css">
			#box{
				height: 100px;
				background: black;
				color: white;
			}
		</style>
	</head>
	<body>
	   <div id="box"></div>
	</body>
</html>

6.3.综合案例2

在这里插入图片描述

综合案例2代码实现：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//获取到box对象
				var oDiv = document.getElementById("box");
				
				oDiv.onmousedown = function(ev){
					//事件兼容性处理
					var ev = ev || event;
					
					var disX = ev.clientX - oDiv.offsetLeft;
					var disY = ev.clientY - oDiv.offsetTop;
					
					document.onmousemove = function(ev){
						
						var ev = ev || event;
						
						oDiv.style.left = ev.clientX - disX + "px";
						oDiv.style.top = ev.clientY -disY + "px";
					}
					document.onmouseup = function(){
						 
						document.onmousemove = null;
						document.onmouseup = null;
					}
					return false;
				}
			}
		</script>
		<style type="text/css">
			#box{
				position: absolute;
				
			}
			#box img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/window.png"/>
		</div>
	</body>
</html>

6.4.event对象上的keycode属性

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.onkeypress = function(ev){
					//event对象
					var ev = ev || event;
					alert(ev.keyCode);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

//对比onkeypress，有什么不同？
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.onkeydown= function(ev){
					//event对象
					var ev = ev || event;
					alert(ev.keyCode);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

**总结：keycode主要是用来记录用户按下的是哪个键，onkeypress和onkeydown按下时，键盘码不同，常用于游戏中控制方向或者翻页，onkeypress事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。 **

6.5.综合案例3

//通过键盘控制方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//获取到box对象
				var oBox = document.getElementById('box');
				//定义x y轴的增量
				var x = y= 0;
				//键盘按下事件
				document.onkeydown = function(ev){
					//事件兼容
					var ev = ev || event;
					
					
					//上38  下 40 左37 右39
					switch(ev.keyCode){
						case 38:
							y -= 10;
							break;
						case 40:
							y += 10;
							break;
						case 37:
							x -= 10;
							break;
						case 39:
							x += 10;
							break;
					}
					//改变偏移量
					oBox.style.left = x + "px";
					oBox.style.top = y + "px";
				}
			}
		</script>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		 <div id="box">
		 </div>
	</body>
</html>