JS事件处理与应用技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanjiejiaoxiangni/article/details/83551906

1、event对象：用来获取事件的详细信息：鼠标位置，键盘位置
知识点：event.clienX:事件属性返回当事件被触发时鼠标指针向对于当前浏览器页面（客户区）的水平坐标。
event.clientY:事件属性返回当事件被触发时鼠标指针向对于当前浏览器页面（客户区）的垂直坐标。
event对象的兼容性获取方式：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
	</style>
	<script>
		window.onload = function (){
			document.onclick = function(ev){
				//clientX:事件属性返回当事件被触发时鼠标指针向对于当前浏览器页面（客户区）的水平坐标。
				//clientY 事件属性返回当事件被触发时鼠标指针向对于当前浏览器页面（客户区）的垂直坐标。
				
				//alert(event.clientX+','+event.clientY);
				//event.clientX 只适用于IE，ev适用于火狐，谷歌，故获取event对象的兼容性写法：ev||event
				var oEvent = ev||event;
				alert(oEvent.clientX+','+oEvent.clientY);
			};
		};
	</script>
</head>
<body style ="border:1px solid black;">
	
</body>
</html>

2、事件冒泡：事件的传递性，从里层到外依次执行

<!--事件冒泡：-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		div{
			padding:100px;
		}
	</style>
	<script>
		/**本代码会依次弹出red,green,yellow,展示了事件从里到外层依次执行*/
	</script>
</head>
<body style ="border:1px solid black;">
	<div style="background:yellow;" onclick="alert(this.style.background);"> 
		<div style="background:green;" onclick="alert(this.style.background);">
			<div style="background:red;" onclick="alert(this.style.background);">
			</div>
		</div>
	</div>
</body>
</html>

3、取消事件冒泡案例：点击按钮，展示div,点击其他区域，隐藏div
event.cancelBubble

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#div1{
			width:200px;
			height:200px;
			background:gray;
			display:none;
		}
	</style>
	<script>
		/**实现功能：点击按钮时，显示div,点击其他区域隐藏，用到的知识点：取消事件冒泡*/
		window.onclick = function(){
			var oDiv = document.getElementById('div1');
			var oBtn = document.getElementById('btn1');
			oBtn.onclick = function(ev){
				oDiv.style.display='block';
				alert('btn被点击了！');
				//如不取消冒泡，document事件会被顺序执行，导致div的display被设置为none
				var oEvent = ev || event;
				oEvent.cancelBubble = true;
			};
			
			
			document.onclick = function(){
				oDiv.style.display='none';
				alert('document被点击了！');
			}
		}
	</script>
</head>
<body>
	<input type="button" id="btn1" value="显示div"/>
	<div id="div1"></div>
</body>
</html>

4、设置div跟随鼠标移动
原理：设置设置div的left和top分别对应clientX和clientY
注意：如果页面有滚动条，鼠标距离页面顶部的位置实际是元素的内容向上滚动的像素数+元素到可视区顶部的距离
即：scollTop+clientY（页面无滚动条，scrollTop =0）

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
		}
	</style>
	<script>
		/**原理：设置div的left和top分别对应clientX和clientY
			注意：如果页面有滚动条，鼠标距离页面顶部的位置实际是元素的内容向上滚动的像素数+元素到可视区顶部的距离
			即：scollTop+clientY（页面无滚动条，scrollTop =0）
		*/
		/**可封装成公共方法*/
		function getPos(ev){
			
			//浏览器兼容，谷歌支持document.body.scrollTop
			var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft + document.body.scrollLeft;
			return {x:ev.clientX + scrollLeft , y:ev.clientY + scrollTop};
		};			
		
		document.onmousemove = function (ev){
			var oDiv = document.getElementById('div1');
			var oEvent = ev || event;
			var position = getPos(oEvent);
			oDiv.style.left = position.x + 'px';
			oDiv.style.top = position.y + 'px';
		};
	
	</script>
</head>
<body style="height:2000px;">
	<div id="div1"></div>
</body>
</html>

5、一串div跟随鼠标移动
原理：类似游戏老鹰捉小鸡，1、设置当前div的left = 前一个div的offsetLeft 2、设置第一个div的位置为鼠标所在的位置

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		.display{
			width:5px;
			height:5px;
			background:red;
			position:absolute;
			
		}
	</style>
	<script>
		/**原理：设置div的left和top分别对应clientX和clientY
			注意：如果页面有滚动条，鼠标距离页面顶部的位置实际是元素的内容向上滚动的像素数+元素到可视区顶部的距离
			即：scollTop+clientY（页面无滚动条，scrollTop =0）
		*/
		/**可封装成公共方法*/
		function getPos(ev){
			
			//浏览器兼容，谷歌支持document.body.scrollTop
			var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft + document.body.scrollLeft;
			return {x:ev.clientX + scrollLeft , y:ev.clientY + scrollTop};
		};			
		
		document.onmousemove = function (ev){
			var oDivs = document.getElementsByTagName('div');
			//获取鼠标位置
			var oEvent = ev || event;
			var position = getPos(oEvent);
			
			for(var i=oDivs.length-1;i>0;i--){
				oDivs[i].style.left = oDivs[i-1].offsetLeft+'px';
				oDivs[i].style.top = oDivs[i-1].offsetTop+'px';
			}
			oDivs[0].style.left = position.x + 'px';
			oDivs[0].style.top = position.y + 'px';
		};
	
	</script>
</head>
<body>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
	<div class="display"></div>
</body>
</html>

6、键盘控制鼠标移动
知识点：1、键盘按下事件onkeydown；2、键盘上的每个按键都有对应的键值keyCode,如enter键=13，左键=37，右键=39
原理：获取当前按键的值，判断是否是左右键，设置div的left

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#div1{
			width:100px;
			height:100px;
			position:absolute;
			background:red;
		}
	</style>
	<script>
		document.onkeydown = function(ev){
			var oDiv = document.getElementById('div1');
			
			var oEvent = ev || event; 
			//获取当前键盘按键 
			//alert(oEvent.keyCode);
			//键盘左键，键盘的每个键都有固定的键值
			if(oEvent.keyCode == 37){
				oDiv.style.left=oDiv.offsetLeft -10 +'px';
			}else if (oEvent.keyCode == 39){
				//键盘右键,设置div向右移动10px
				oDiv.style.left =oDiv.offsetLeft + 10 +'px';
				
			}
		};
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

7、提交留言：为文本框增加onkeydown事件，按ctrl+enter将文本框的内容放入文本域
知识点：键盘一些属性:ctrlKey,shiftKey,altKey

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		
	</style>
	<script>
		window.onload = function(){
			var oTxt1 = document.getElementById('txt1');
			var oTxt2 = document.getElementById('txt2');
			
			oTxt1.onkeydown = function(ev){
				oEvent = ev || event;
				
				//enter键 +ctrl  
				if(oEvent.keyCode ==13 && oEvent.ctrlKey){
					//将txt1的内容放入txt2,并换行
					oTxt2.value += oTxt1.value+'\n';
					//清空txt1
					oTxt1.value='';
				}
				
			};
			
		}
		
	</script>
</head>
<body>
	<input type="text" id="txt1" />
	<br>
	<textarea rows="10" cols="20" id="txt2" ></textarea>
</body>
</html>

js事件基础