事件对象（event）

最新推荐文章于 2023-10-08 08:41:13 发布

zuo_zuo_blog

最新推荐文章于 2023-10-08 08:41:13 发布

阅读量278

点赞数

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103960593

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

1. 事件对象的获取（event的获取）
event内容重要内容
在这里插入图片描述

<script>
				document.onclick=function(event){
					event=event||window.event;
					console.log(event);
					console.log(event.timeStamp);
					console.log(event.bubbles);     //true
					console.log(event.button);        //0
					console.log(event.pageX);          //232
					console.log(event.pageY);        //218
					console.log(event.screenX);       //232
					console.log(event.screenY);        //289
					console.log(event.target);        //
					console.log(event.type);          //click
					console.log(event.clientX);       //232
					console.log(event.clientY);        //218
				}
		</script>

2. screenX、pageX和clientX的区别
在这里插入图片描述
3. PageY和pageX的兼容写法（很重要）

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

案例如下
a)鼠标跟随

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 5000px;
				padding: 0;
				margin: 0;
			}
			img{
				border: 1px solid #000;
				cursor: pointer;
				position: absolute;
				width: 100px;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>
		<img src="images/img.jpg" alt="" />
		<script>		
			var img=document.getElementsByTagName("img")[0];
			var timer=null;
			var targetx=0;
			var targety=0;
			var leaderx=0;
			var leadery=0;
			document.onclick=function(event){
				event=event||window.event;
				var pagey=event.pageY||scroll().top+event.clientY;
				var pagex=event.pageX||scroll().left+event.clientX;
				targetx=pagex-30;
				targety=pagey-50;
				clearInterval(timer);
				timer=setInterval(function(){
					leaderx=img.offsetLeft;
					leadery=img.offsetTop;
					var stepy=(targety-leadery)/10;
					var stepx=(targetx-leaderx)/10;
					stepx=stepx>10?Math.ceil(stepx):Math.floor(stepx);
					stepy=stepy>10?Math.ceil(stepy):Math.floor(stepy);
					leadery=leadery+stepy;
					leaderx=leaderx+stepx;
					img.style.left=leaderx+"px";
					img.style.top=leadery+"px";
				},30)
			}
		</script>
	</body>
</html>

b）鼠标在盒子中的移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 200px;
				background-color: pink;
				padding-top: 100px;
				margin: 100px;
				text-align: center;
				font-size: 18px;
				font-weight: 500;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box"> 
			x:100px<br />
			y:100px<br />
		</div>
		<script>
			var div=document.getElementsByTagName("div")[0];
			div.onmousemove=function(){
				var pagex=event.pageX||scroll().left+event.clientX;
				var pagey=event.pageY||scroll().top+event.clientY;
				var xx=div.offsetLeft;
				var yy=div.offsetTop;
				var x=pagex-xx;
				var y=pagey-yy;
				this.innerHTML="X="+x+"px;<br>Y="+y+"px;"
			}
		</script>
	</body>
</html>

c）拖拽案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.nav{
				height: 30px;
				background-color: #CCCCCC;
				line-height: 30px;
				padding-left: 30px;
				border-bottom: 1px solid #369;
			}
			.nav a{
				text-decoration: none;
				font-size: 14px;
				text-align: center;
				color: #fff;
			}
			.d-box{
				width: 400px;
				height: 300px;
				border: 5px solid #eee;
				box-shadow: 2px 2px 2px 2px #666;
				position: absolute;
				top:40%;
				left: 40%;
			}
			.hd{
				width: 100%;
				height: 25px;
				background-color: #7c9299;
				border-bottom: 1px solid #369;
				line-height: 25px;
				color: white;
				cursor: move;
			}
			#box_close{
				float: right;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" id="register">注册信息</a>
		</div>
		<div class="d-box" id="d-box">
			<div class="hd" id="drop">
				<i>注册信息（可以拖拽）</i>
				<span id="box_close">【关闭】</span>
			</div>
			<div class="bd"></div>
		</div>
		<script src="animate.js"></script>
		<script>
			window.onload=function(){
				var box=document.getElementById("d-box");
				var drop=document.getElementById("drop");
				drop.onmousedown=function(event){
					event=event || window.event;
					var pagex=event.pageX || scroll().left+event.clientX;
					var pagey=event.pageY || scroll().top+event.clientY;
					var x=pagex-box.offsetLeft;
					var y=pagey-box.offsetTop;
					document.onmousemove=function(event){
						event=event ||window.event;
						var xx=event.pageX || scroll().left+event.clientX;
						var yy=event.pageY || scroll().top+event.clientY;
						xx=xx-x;
						yy=yy-y;
						box.style.left=xx+"px";
						box.style.top=yy+"px";
						//禁止文本选中
						 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				}
				
			
			}
			//事件解绑
			  drop.onmouseup = function () {
			                //解绑
			                document.onmousemove = null;
			            }
			}
		</script>
	</body>
</html>