JS滚轮事件和键盘事件

##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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值