JS滚轮事件和键盘事件

最新推荐文章于 2023-12-04 11:29:51 发布

可乐爆米花

最新推荐文章于 2023-12-04 11:29:51 发布

阅读量988

点赞数

分类专栏： JavaScript 前端端端端端端

本文链接：https://blog.csdn.net/william_jzy/article/details/79878649

版权

前端端端端端端同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

##onmousewheel
滚轮事件就是随着滚轮滚动发生变化，但是火狐不支持
兼容火狐：使用DOMMouseScroll来绑定事件，需要通过addEventListener()函数来绑定。
使用addEventListener()方法绑定响应函数时，取消默认行为不能使用renturn false，要使用event.preventDefault()来取消（但是IE8不支持）。

wheeldelta 用来获取滚轮滚动的方向：正值向上滚，负值向下滚
在火狐中，使用event.detail来获取滚动方向：负值向上滚，正值向下滚

小例子：随滚轮滚动变化长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	
		<script type="text/javascript">
			//滚轮向下滚，div变长；向上滚，变短
			window.onload = function(){
				var box1 = document.getElementById("box1");
				/*
				 * 给box1绑定滚轮滚动响应函数
				 * 		onmousewheel 随着滚轮滚动发生变化，但是火狐不兼容
				 * 		火狐要使用DOMMouseScroll来绑定，
				 * 		onMouseScroll需要使用addEventListener()来绑定
				 * 	使用bind函数
				 */
				box1.onmousewheel = function(event){
					event = event || window.event;
					//使用wheelDelta获取滚轮滚动方向 （只看大小，不看方向
					//正值向上滚，负值向下滚
					//兼容火狐使用 event.detail
					//	正值向下滚，负值向上滚
					if(event.wheelDelta > 0 || event.detail < 0){
						//向上滚变短
						box1.style.height = box1.clientHeight - 10 +"px";
					}else{
						//向下滚变长
						box1.style.height = box1.clientHeight + 10 +"px";
					}
					
				};
				
				bind(box1 , "DOMMouseScroll" , box1.onmousewheel);
				
				//创建bind函数绑定对象
				/*
				 * 参数：
				 * 	   obj:要绑定事件的对象   eventStr:事件的字符串（不要"on"）  callback:回调函数
				 */
				function bind(obj , eventStr , callback){
					if(obj.addEventListener){
						/*addEventListener()
						 *   参数： 1、事件的字符串（不要on
						 * 		   2、回调函数
						 * 		   3、是否在捕获阶段触发事件
						 *  当事件触发时，响应函数会按照函数的绑定顺序执行
						 * 	IE8以下不支持
						 */
						obj.addEventListener(eventStr , callback , false);
					}else{
						/*obj.attachEvent()						
						 * 	参数： 1.事件字符串（要on
						 * 		  2.回调函数
						 * 	先绑定后执行，顺序和addEventListener()相反
						 * 	支持IE8以下
						 */
						//obj.attachEvent("on"+eventStr , callback);
						 /*
						 *addEventListener()中的this是绑定事件的对象，
						 * attachEvent()中的this是window
						 * 		需要统一两个方法
						 */
						
						obj.attachEvent("on"+eventStr , function(){
							//在匿名函数中调用回调函数
							callback.call();
						});
					}
				}
			};
			
		</script>
		
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

##键盘事件
onkeydown 按键被按下（如果一直按着不松手，时间会一直被触发；当它连续触发时，第一次和第二次之间的时间会稍长，后面会很快，这是为了防止误操作）
onkeyup 按键被松开
一般会绑定给一些可以获取到焦点的对象（表单项）或者document上
keyCode可以获取到按键编码，（可以判断哪个键被按下）
altKey 、 ctrlKey、shiftKey可以判断Alt、Ctrl、shift键是否被按下，若按下，返回true，没有则返回false。

当在文本框中输入内容，内容显示在文本框中属于onkeydown的默认行为，如果在onkeydown中取消默认行为（return false），则输入的内容不会出现在文本框中。

例：让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">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				
				document.onkeydown = function(event){
					event = event || window.event ;
					//定义一个速度变量
					var speed = 10;
					//当按下Ctrl键时，速度变快
					if(event.ctrlKey){
						speed = 100;
					}
					
					//console.log(event.keyCode);
					//←：37 ↑：38 →：39 ↓：40
/*					if(event.keyCode === 37){//左
						box1.style.left -= 50 +"px";
					}else if(event.keyCode === 39){//右
						box1.style.left += 50 +"px";
					}else if(event.keyCode === 38){//上
						box1.style.top -= 50 +"px";
					}else if(event.keyCode === 40){//下
						box1.style.top += 50 +"px";
					}*/
					switch(event.keyCode){
						case 37:
							box1.style.left = box1.offsetLeft - speed +"px";
							break;
						case 38:
							box1.style.top = box1.offsetTop - speed +"px";
							break;
						case 39:
							box1.style.left = box1.offsetLeft + speed +"px";
							break;
						case 40:
							box1.style.top = box1.offsetTop + speed +"px";
							break;
					}
				};
				
			};
			
		</script>
		
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

可乐爆米花

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS滚轮事件和键盘事件

onmousewheel滚轮事件就是随着滚轮滚动发生变化，但是火狐不支持兼容火狐：使用DOMMouseScroll来绑定事件，需要通过addEventListener()函数来绑定。使用addEventListener()方法绑定响应函数时，取消默认行为不能使用renturn false，要使用event.preventDefault()来取消（但是IE8不支持）。wheeldel...
复制链接

扫一扫

专栏目录