前端---js（自学笔记26)（滚轮的事件、键盘事件、键盘移动div）

不念不忘少年蓝@ 2022-12-01 14:22 150阅读 0赞

### 滚轮的事件 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>滚轮事件</title>
    		<style type="text/css">
    			#box{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function(){
    				/**
    				 * 当鼠标向上滚动时，box变短
    				 * 当鼠标向下滚动时，box变长
    				 * **/
    				//获取id为box的div
    				var box =document.getElementById("box");
    				//为box绑定一个鼠标滚轮事件
    				/**
    				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮时触发，
    				 * 但是火狐不支持该属性
    				 * 
    				 * 在火狐中需要使用DOMMouseScroll来绑定滚轮事件
    				 * 注意该事件需要通过addEventListener()函数来绑定
    				 * 
    				 * **/
    				box.onmousewheel = function(event){
    					event = event || window.event;
    					/**
    					 * 判断鼠标滚轮滚动的方向
    					 * 
    					 * 
    					 * event.wheelDelta 可以获取鼠标滚轮滚动的方向
    					 * IE中向上滚120  向下滚-120
    					 * 谷歌中向上滚300  向下滚-300
    					 * wheelDelta这个值我们不看大小，只看正负
    					 *
    					 * **/
    					//alert(event.wheelDelta)
    					
    					/**
    					 * wheelDelta这个属性火狐中不支持
    					 * 在火狐中使用event.detail来获取滚动方向
    					 * 向上-3，向下3
    					 * **/
    					//alert(event.detail);
    					//alert("滚轮~~~")
    					//判断鼠标滚轮滚动的方向
    					if(event.wheelDelta>0 || event.detail<0){
    						//alert("向上滚.....,变短")
    						box.style.height =box.clientHeight-10+"px"
    					}else{
    						box.style.height =box.clientHeight+10+"px"
    						//alert("向下滚.....，变长")
    					}
    					/**
    					 * 使用addEventListener()方法绑定响应函数，取消默认行为时，不能使用return false
    					 * 需要使用event来取消默认行为event.preventDefault();
    					 * 但是IE8不支持event.preventDefault()，如果直接用会报错
    					 * **/
    					event.preventDefault();
    					/**
    					 * 当滚轮滚动时，如果浏览器有滚滚动条时，滚动条会随之滚动
    					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
    					 * **/
    					return false;
    				}
    				//为火狐绑定滚轮事件
    				bind(box,"DOMMouseScroll",box.onmousewheel)
    			}
    		</script>
    	</head>
    	<body style="height: 1000px;">
    	<div id="box"></div>
    	</body>
    </html>

![20200827173021480.gif][]

### 键盘事件： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>按键事件</title>
    		<script type="text/javascript">
    			window.onload = function(){
    				/**
    				 * 键盘事件：
    				 * onkeydown
    				 * -按键被按下
    				 * -对于onkeydown来说如果一直按着某个键盘不松手，则事件会一直触发
    				 * -当onkeydown连续触发时，第一次和第二次时间间隔会长一点，之后连续操作会快很多
    				 * -这是为了防止误操作的发生
    				 * 
    				 * onkeyup
    				 * -按键被松开
    				 * 
    				 * 键盘事件一般都会绑定给一些可以获取到焦点的对象或是document
    				 * **/
    //				document.onkeydown =function(event){
    //					//console.log("按键按下")
    //					event = event || window.event
    					/**
    					 * 可以通过keycode获得按键编码
    					 * 通过他可以判断那个按键被按下
    					 * 除了keycode，事件对象中还提供了几个属性
    					 * altKey
    					 * ctrlKey
    					 * shiftKey
    					 * -这个三个用来判断alt ctrl shift是否被按下
    					 * 如果按下则返回true，否则返回false
    					 * **/
    					
    //					判断一个y是否被按下
    //					if(event.keyCode ===89){
    //						alert("y被按下")
    //					}
    //					判断y和ctrl是否同时被按下
    //					if(event.keyCode === 89 && event.ctrlKey){
    //						console.log("y和ctrl被按下")
    //					}
    //				}
    //				document.onkeyup = function(){
    //					console.log("按键松开")
    //				}
    //			获取input
    			var input = document.getElementsByTagName("input")[0];
    			input.onkeydown = function(event){
    				event = event || window.event;
    				console.log(event.keyCode)
    				console.log("按键被按下")
    				//使文本框不能输入数字
    				//谷歌  ：数字i---9是 keyCode 97--105，
    				
    				if(event.keyCode >= 97 && event.keyCode <= 105){
    				/**
    				 * 在文本框中输入内容，属于onkeydown的默认行为
    				 * 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
    				 * **/
    				return false;
    				}
    //				}
    			}
    			}
    		</script>
    	</head>
    	<body>
    		<input type="text"  style="width: 100px; height: 25px;"/>
    	</body>
    </html>

![20200828153933179.gif][]

### 键盘移动div ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    			
    		</style>
    		
    		<script type="text/javascript">
    			
    			//使div可以根据不同的方向键向不同的方向移动
    			/*
    			 * 按左键，div向左移
    			 * 按右键，div向右移
    			 * 。。。
    			 */
    			window.onload = function(){
    				
    				//为document绑定一个按键按下的事件
    				document.onkeydown = function(event){
    					event = event || window.event;
    					
    					//定义一个变量，来表示移动的速度
    					var speed = 10;
    					
    					//当用户按了ctrl以后，速度加快
    					if(event.ctrlKey){
    						speed = 500;
    					}
    					
    					/*
    					 * 37 左
    					 * 38 上
    					 * 39 右
    					 * 40 下
    					 */
    					switch(event.keyCode){
    						case 37:
    							//alert("向左"); left值减小
    							box1.style.left = box1.offsetLeft - speed + "px";
    							break;
    						case 39:
    							//alert("向右");
    							box1.style.left = box1.offsetLeft + speed + "px";
    							break;
    						case 38:
    							//alert("向上");
    							box1.style.top = box1.offsetTop - speed + "px";
    							break;
    						case 40:
    							//alert("向下");
    							box1.style.top = box1.offsetTop + speed + "px";
    							break;
    					}
    					
    				};
    				
    			};
    			
    			
    		</script>
    	</head>
    	<body>
    		<div id="box1"></div>
    	</body>
    </html>

![20200828172703312.gif][]

[20200827173021480.gif]: /images/20221123/4db1e15fe58e4b1eac28d527d5008b75.png
[20200828153933179.gif]: /images/20221123/05b41f0724d54a708a0cf7e5c55b44a6.png
[20200828172703312.gif]: /images/20221123/2f3c039ab5fb4236a9719146f7ea7568.png