javascript(23)鼠标滚轮事件，键盘事件

最新推荐文章于 2021-12-20 14:57:41 发布

冲啊Javascripit

最新推荐文章于 2021-12-20 14:57:41 发布

阅读量436

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/weixin_43752554/article/details/105616707

版权

javascipt 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在网页中使用鼠标滚轮事件和键盘事件。包括在不同浏览器中如何监听滚轮事件并响应，以及如何使用键盘事件实现元素的动态调整。还提供了具体的代码示例，展示了如何通过键盘事件控制页面元素的移动。

摘要由CSDN通过智能技术生成

一、鼠标滚轮事件

			火狐浏览器通过addEventListener使用DoMMouseScroll绑定滚轮事件,并且使用event.detail来判断正负, 上负下正
			其他浏览器使用onwheel绑定鼠标滚轮事件。使用event.wheelDelta判断鼠标滚动方向,向上为正, 向下为负	
						
			如果滚动滚轮,浏览器的滚动条也会滚动
			在事件中使用return false来取消这种默认行为(非火狐浏览器)
			火狐使用event.preventDefault()来取消

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:100px;
				height:100px;
				background-color: aqua;
			}
		</style>
		<script>
			window.onload=function(){
				var box=document.getElementById("box");
				/**/
				
				//其他浏览器
				/*box.οnwheel=function(event){
					event=event||window.event;
					if(event.wheelDelta>0){
						box.style.height=box.clientHeight-10+"px";
						
					}else{
						box.style.height=box.clientHeight+10+"px";
					}
					return false;
				};*/
				
//				IE浏览器
				/*box.onmousewheel=function(event){
					event=event||window.event;
					if(event.wheelDelta>0){
						box.style.height=box.clientHeight-10+"px";
						
					}else{
						box.style.height=box.clientHeight+10+"px";
					}
					event.preventDefault&&event.preventDefault();
				};*/
				
				//弄清楚了一个困扰好久的问题。这里的function要传event进去，否则event.detail是个定值
				/*box.addEventListener("DOMMouseScroll",function(event){
					event=event||window.event;
					if(event.detail>0){
						box.style.height=box.clientHeight+10+"px";
					}else{
						box.style.height=box.clientHeight-10+"px";
					}
					
					event.preventDefault();
				},false);*/
				
				
				function bind(eventStr,obj,callback){
					if(obj.addEventListener)
					obj.addEventListener(eventStr,callback,false);
					else{
						obj.attachEvent("on"+eventStr,callback)
					}
				}
				box.onwheel=function(event){
					event=event||window.event;
					if(event.detail>0||event.wheelDelta<0){
						box.style.height=box.clientHeight+10+"px";
					}else{
						box.style.height=box.clientHeight-10+"px";
					}
					
					event.preventDefault&&event.preventDefault();
					return false;
				};
				
				bind("DOMMouseSrcoll",box,box.onwheel);
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

要点：

1.可以使用自定义的函数对于不同绑定方式的浏览器进行统一
比如IE用attachEvent()来绑定事件，其他浏览器使用addEventListener()来绑定
事件。就可以通过bind()函数，传统一的参数，然后进行判断，选合适的方法进行事件的绑定

2.有些浏览器不支持某些方法（特指IE！！）,可以判断语句，判断event.方法
名来判断该方法是否存在，或者使用event.方法名&&event.方法来判断是否可
以使用该方法，并应用。比如说，火狐浏览器使用的event.preventDefault来取
消浏览器的默认滚轮滚动，但是IE不支持。就可以使用
event.preventDefault&&event.preventDefault()来判断是否有 这个方法，有的话
就使用，没有的话，就不会进入第二句的判断（短路与）
3.给火狐单独写的addEventListener才有用（在写回调函数的时候一定要记得传入event），那个bind函数给火狐绑定鼠标滚轮最后的效果不对头，我也没搞懂为什么...

二、键盘事件

onkeydown:按下键盘事件
onkeyup:按下键盘抬手事件

		event.keyCode获取按下键盘的键的编码
		如果按下了这三个键,返回true,否则是false
		event.shiftKey
		event.ctrlKey
		event.altKey

以下合并是一段完整的html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:100px;
				height:100px;
				background-color: olive;
				position: absolute;
				
			}
		</style>
		<script>
			
			
			window.onload=function(){
				var out=document.getElementById("out");
				out.onkeydown=function(event){
					console.log(event.keyCode);
					//就会弹窗 up
					out.onkeyup=function(event){
						alert("up");
					}
						//同时按下ctrl，与上
					if(event.ctrlKey==true&&event.keyCode==38){
						console.log("同时按住了ctrl 上");
					}
					//只能按下数字，否则无法输入 键盘数字编号（48 - 57）。
					//这就不支持小键盘输入，因为小键盘有单独的编码（96-105）
					//可以用来输入账号的时候检测是不是有非法字符
					if(event.keyCode<48||event.keyCode>57){
						return false;
					
					};
				};

同时按住两个键，输出：
在这里插入图片描述
这是左上右下的数字编码，下面做div的移动会用到

				var box=document.getElementById("box");
				//控制方块移动
				var speed=10;
				document.onkeydown=function(event){
					event=event||window.event;
					if(event.ctrlKey==true){
						speed=50;
					}
					switch(event.keyCode){
						case 37:
						box.style.left=box.offsetLeft-speed+"px";
						break;
						case 38:
						box.style.top=box.offsetTop-speed+"px";
						break;
						case 39:
						box.style.left=box.offsetLeft+speed+"px";
						break;
						case 40:
						box.style.top=box.offsetTop+speed+"px";
						break;
						
					}
					
						
				};
			};
			
		</script>
	</head>
	<body>
		<input type="text" id="out">
			<div id="box"></div>
	</body>
</html>