js中事件的应用_js 事件作用演式-CSDN博客

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/52785642

大家在页面上添加各种特效必不可少的运用到某些事件，比如点击onclick、经过onmouseover、离开onmouseout、移动onmousemove等，上面的为鼠标事件，还有键盘事件onkeydown，诸如此类的事件还有很多。这里我给大家介绍一点我了解的知识给大家，运用event对象和事件来处理一些事。

首先，对event对象进行兼容性处理

<script>
window.οnlοad=function ()
{
	document.οnclick=function (ev)
	{
		//IE
		//alert(event.clientX+','+event.clientY);
		
		//非IE
		//alert(ev.clientX+','+ev.clientY);
		
		var oEvent=ev||event;
		
		alert(oEvent.clientX+','+oEvent.clientY);
	};
};
</script>

1、事件冒泡

我们通过一个例子来了解下冒泡事件

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;border: none;list-style: none;}
			body{padding: 100px;}
			input{width: 40px;height: 20px;background: #666;color: red;margin-bottom: 3px;border-radius: 3px;}
			.box{width: 300px;height: 150px;border: 1px solid #777;display: none;}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oBtn = document.getElementById('btn');
				var oBox = document.getElementById('box');
				
				
				oBtn.οnclick=function  (ev) {
					if (oBox.style.display='none') {
						oBox.style.display='block';
						
					} else{
						oBox.style.display='none';
					}
					
					var oEvent = ev || event;
					oEvent.cancelBubble=true;</span>
				}
				document.οnclick=function  () {
					oBox.style.display='none';
				}
				
			};
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="选择" />
		<div class="box" id="box">
			
		</div>
	</body>
</html>

效果图：

描述：当鼠标点击选择按钮的时候，黑色边框出现（开始隐藏），点击在边框外的空白部分黑色边框将会隐藏掉。在这里就用到了冒泡处理，看上面代码，如果不添加红色部分，我们看到的效果将是：点击按钮出现，点击空白部分消失，在点击按钮，不会出现（理想效果应该是会出现的）。这里的第二个鼠标点击事件就影响到了第一个，其实当再次点击按钮的时候边框是出现了的，但是代码运行到下面的时候有备影藏了。然后我们添加红色部分代码就会消除这个bug，着就是冒泡的一个小应用。

2、鼠标事件onmousemove

根据上面例子的学习，我制作了一个小特效，我取名为小鸡跟母鸡。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{background: red;}
			div{width: 30px;height: 30px;background: cornflowerblue;position: absolute;border-radius: 15px;}
		</style>
		<script type="text/javascript">
			function Pfag (ev) {
				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.οnmοusemοve=function  (ev) {
				var oEvent = ev || event;
				var aDiv = document.getElementsByTagName('div');
				var oPfag =Pfag(oEvent);
				
				for (var i=aDiv.length-1;i>0;i--) {
					aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
					aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
				}
				aDiv[0].style.left=oPfag.x+'px';
				aDiv[0].style.top=oPfag.y+'px';
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

效果图：

描述：这个案例达到的效果就是：有很多的小圆圈会随着鼠标的位置移动而跟着移动，看起来有点像贪吃蛇，在代码部分省略了很多div，节约空间，这里运用了onmousemove事件。

3、键盘事件onkeydown

看下面个例子

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 150px;height: 170px;position: absolute;}
			.one{width: 40px;height: 40px; margin-left: 55px;background: black;float: left;}
			.two{clear: both; width: 20px;height: 10px;margin-left: 65px;background: black;float: left;}
			.three{clear: both;width: 50px;height: 60px;background: black;float: left;margin-left: 50px;}
			.four{clear: both;width: 15px;height: 50px;background: black;float: left;margin-left: 55px;margin-right: 10px;}
			.five{width: 15px;height: 50px;background: black;float: left;}
		</style>
		<script type="text/javascript">
			window.οnkeydοwn=function  (ev) {
				var oBox = document.getElementById('box');
				var oEvent = ev || event;
				
				if (oEvent.keyCode==37) {
					oBox.style.left=oBox.offsetLeft-10+'px';
				} if (oEvent.keyCode==39) {
					oBox.style.left=oBox.offsetLeft+10+'px';
				}
				if (oEvent.keyCode==38) {
					oBox.style.top=oBox.offsetTop-10+'px';
				}
				if (oEvent.keyCode==40) {
					oBox.style.top=oBox.offsetTop+10+'px';
				}
			};
		</script>
	</head>
	<body>
		<div id="box">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
			<div class="four"></div>
			<div class="five"></div>
		</div>
	</body>
</html>

描述：首先获取键盘中上下左右各键的键值，左（37），上（38），右（39），下（40）。按下各方向键图形就会随着改变的方向移动。