JS（十一）

最新推荐文章于 2023-04-17 17:27:16 发布

MsStrbig

最新推荐文章于 2023-04-17 17:27:16 发布

阅读量272

点赞数

分类专栏： HTML+CSS 文章标签： javascript 前端 dom 对象

本文链接：https://blog.csdn.net/MsStrbig/article/details/78670944

版权

HTML+CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

事件对象（event）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#move{
				width: 300px;
				height: 150px;
				background-color: #00BFFF;
			}
			#show{
				width: 300px;
				height: 100px;
				background-color:#FF0000;
				margin: 20px 0px;
			}
			
		</style>
		<script type="text/javascript">
			window.οnlοad=function(){
				//当鼠标移到move div上的时候，在show div中显示鼠标指针的坐标；
				//获取div
				var move=document.getElementById("move");
				var show=document.getElementById("show");
				//鼠标移动的事件 onmousemove事件
				//事件对象就是游览器在执行响应函数的时候，会将一个事件对象作为参数传递给当前的响应函数
				//事件对象封装了当前事件相关的所有信息：鼠标的坐标，键盘的按键
				//clientX,clientY,属性表示当前事件对象的,X,Y坐标;
				move.οnmοusemοve=function(event){
					//在show中显示；
					//alert("（"+event.clientX+","+event.clientY+")");
					show.innerHTML="（"+event.clientX+","+event.clientY+")";
				}
			}
		</script>
	</head>
	<body>
		<div id="move"></div>
		<div id="show"></div>
	</body>
</html>

练习

1：功能需求 div跟随着鼠标移动；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
				/*开启了绝对定位的元素才能设置偏移量*/
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			//功能需求  div跟随着鼠标移动；
			window.οnlοad=function(){
				//获取div;
				var box1=document.getElementById("box1");
//				console.log(box1);
   //当鼠标在body中移动的时候，div跟随着鼠标移动；document.body表示body元素
   //console.log(document.body);div的偏移量是相对于整个页面的，而我们clientX是相对于可见框的原点的
   //在滚动条滚动的时候就会发生变化
				document.οnmοusemοve=function(event){
					//解决兼容性问题；
					event=event||window.event;
					//获取游览器的垂直滚动条滚动的距离；
//					console.log(document.body.scrollTop);
					//document.body.scrollTop ,在chrome中游览器兼容其他游览器不兼容;
					//var st=document.documentElement.scrollTop||document.body.scrollTop;
						var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//					var left=event.clientX;
//					var top=event.clientY;
                      var left=event.clientX;
                      var top=event.clientY;
					//设置偏移量，前提是元素开启了定位，不然没有效果；event.clientX表示鼠标指针的坐标没有单位
		
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
				}
			}
		</script>
	</head>
	<body style="height: 1000px;">
		<div id="box1"></div>
		
	</body>
</html>