15.JS的基础学习——15day

最新推荐文章于 2024-09-16 08:47:17 发布

小周日记

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量105

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/actores/article/details/115268584

版权

JavaScript学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1.鼠标滚轮事件

<!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">
			
			window.onload = function(){
				
				/*
				 * 当鼠标滚轮向下滚动的时候，box1变长
				 * 	 当鼠标滚轮向上滚动的时候，box1变短
				 * 
				 */
				var box1 = document.getElementById("box1");
				//onmousewheel2019已经废弃这个方法
				//获取id为box1的第v
				/*
				 * onmousewheel 鼠标滚轮的滚动事件，会在滚轮的时候触发
				 * 	 但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用DOMMouseScroll 来绑定事件
				 * 		注意该事件需要通过addEventListener
				 * 
				 */
		//方式一：
				//谷歌里触发的这个函数
				/*box1.onmousewheel = function(){
		
					alert("滚轮滚了~~~~");
				};
				//调用兼容浏览器的方法：在火狐里触发的这函数
				bind(box1,"DOMMouseScroll",function(){
					
					alert("滚轮滚了~~~~");
				});*/
			//但是这里两个函数,比较麻烦
		//方式二：	
			//合并为一个
				/*function fun(){
					alert("滚轮滚了~~~~");
				};
				box1.onmousewheel = fun;
				bind(box1,"DOMMouseScroll",fun);*/
		//实现业务函数：
				box1.onmousewheel = function(event){//兼容谷歌
					event = event || window.event;
					/*业务逻辑：
					 * 当鼠标滚轮向下滚动的时候，box1变长
					 * 	 当鼠标滚轮向上滚动的时候，box1变短
					 */
				//1.判断鼠标滚轮滚动的方向
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚120 向下滚-120
					//alert(event.wheelDelta)
					//但是：wheelDelta这个属性火狐中不支持
					
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚-3 向下滚3
					//alert(event.detail);
					
					if(event.wheelDelta > 0 || event.detail < 0 ){
						//向上滚变短
						//alert("向上滚");
				//2.获取值 然后改变当前的值
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向上滚变长
						//alert("向下滚");
						
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					
			//3.取消浏览器的默认行为~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
				/*
				  * 但是使用addEventListener()方法绑定函数，取消默认行为时不能使用 return false
				  * 怎么解决????
				  *  	需要使用event来取消默认行为event.preventDefault();
				  * 	但是IE8不支持event.preventDefault();这个方法，如果使用会报错
				  */
					//event.preventDefault();//专门对付addEventListener的
				//解决《判断》
				event.preventDefault() && event.preventDefault();
				
		
				/*
				 * 当滚轮滚动时，如果浏览器有滚动条，滚动条随之滚动
				 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
				 * 
				 */
				 return false;
					
					
					
					
					
				};
					//调用兼容浏览器的方法：在火狐里触发的这函数
					bind(box1,"DOMMouseScroll",box1.onmousewheel);	 
			};
			
			
			
			//兼容火狐
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
			
			
			
			
			
		</script>
		
		
		
	</head>
	<body style="height: 2000px;">
		<div id="box1"></div>
		
	</body>
</html>

2.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 键盘事件：
				 * 		onkeydown
				 * 			- 按键被按下
				 * 			- 对于onkeydown来说如果一直按着某个键不松手，则事件会一直触发
				 * 			- 为什么当第一个按下的时候就比较慢，后面就比较快的，这样的操作就是为了防止误操作
				 * 
				 * 
				 * 
				 * 		onkeyup
				 * 			- 按键被松开
				 * 
				 * 注意：键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
				 * 
				 * 
				 * 
				 */
				
				/*document.onkeydown = function(event){
					//console.log("按键被按下");
					
					/*
					 * 可以通过keyCode来获取按键的编码
					 * 	   通过它可以判断哪个按键被按下
					 * 除了keyCode，事件对象中还提供了几个属性
					 * 	  altKey
					 * 	  ctrlKey
					 * 	  shiftKey
					 * 		  - 这三个用来判断alt ctrl shift 是否被按下
					 * 			  如果按下则返回true,否则返回false
					 */
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					/*if(event.keyCode === 89 && event.ctrlKey){
						
						//console.log("y被按下了");
						  console.log("y和ctrl都被按下了");
					}
					
					
					
				};*/
				
				/*document.onkeyup = function(){
					
					console.log("按键被松开");
				};*/
				
		//对input进行获取键盘事件
			
			var inputs = document.getElementsByTagName("input")[0];
			
			inputs.onkeydown = function(event){
				//浏览器兼容
				event = event || window.event;
				
				
				//console.log("键盘在input被按下");
				
				//在文本框输入内容，属于onkeydown的默认行为
				//如果onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
				//return false;
				
				//小练习：当输入数字的时候不会输入在文本框当中
					//业务逻辑：
					//1.先获取事件，传入一个event
					//2.数字48-57(我的是96-105)
					//3.方法keyCode
				if (event.keyCode >= 96 && event.keyCode <= 105) {
					
				 	return false;
				}

			};
				
				
				
				
				
				
				
				
				
				
		};
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
	</head>
	<body>
		<!--<div id="box1" style="width: 100px; height: 100px; background-color: red;"></div>-->
		<input type="text"/>
	</body>
</html>

3.方向键控制盒子移动练习

<!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(){
				
				//业务逻辑：
				/* 1. 按下左键，box2向左走
				 * 2. 获取左键
				 * 3. 获取键盘事件按下onkeydown
				 * 
				 * 
				 * 上下左右38 40 37 39
				 * 
				 */
				
				var box1 = document.getElementById("box1");
				document.onkeydown = function(event){
					//兼容浏览器
					event = event || window.event;
					
					//定义一个变量来控制移动的速度
					var speed = 10;
					
					//当按下ctrl的时候，开始变速
					if(event.ctrlKey){
						
						speed = 50;
					}
					
					
					/*
					 * 37左
					 * 38上
					 * 39右
					 * 40下
					 */
				//offsetLeft 这个是它原来的值
					switch(event.keyCode){
						case 37:
							//alert("向左");
							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>

4.滚轮事件

<!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">
			
			window.onload = function(){
				
				
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
				
				
				box1.onmousewheel = function(event){
					
					event = event || window.event;
					
					
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);
					
					
					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
					//判断鼠标滚轮滚动的方向
					if(event.wheelDelta > 0 || event.detail < 0){
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向下滚，box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					/*
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
					 * 需要使用event来取消默认行为event.preventDefault();
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
					 */
					event.preventDefault && event.preventDefault();
					
					
					/*
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					return false;
					
					
					
					
				};
				
				//为火狐绑定滚轮事件
				bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
				
			};
			
			
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		</script>
	</head>
	<body style="height: 2000px;">
		
		<div id="box1"></div>
		
	</body>
</html>