js中event对象以及其相关属性

最新推荐文章于 2023-09-26 17:12:41 发布

钱端攻城狮

最新推荐文章于 2023-09-26 17:12:41 发布

阅读量179

点赞数

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_54932975/article/details/123751549

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 3000px;
			}
			#one{
				width: 300px;
				height: 300px;
				background-color: sandybrown;
				margin: 40px;
			}
			
			
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	//但凡是..x  ..y 说的都是鼠标的位置!!只有位置才是一点,是一个点才有x y值!!
	
	//以后但凡是...width  ...height ...left  ..top 这些都是说标签的值!!
	//one 也就是事件源标签  事件发生的源头标签
	one.onclick = function(){
		//是鼠标距离浏览器窗口左侧 和  上边的距离!! clientX  clientY
//		console.log(event.clientX, event.clientY);
		
		//是鼠标距离被点击的标签的左侧和上侧距离     offsetX  offsetY
//		console.log(event.offsetX, event.offsetY);


        //是鼠标距离窗口中内容区域的左侧he上面的距离  哪怕发生向上滚动 也能检测到距离页面内容顶部的距离!pageX  pageY
//      console.log(event.pageX, event.pageY);
        
        
        //screenX  screenY screen就是设备屏幕的意思
        //所以是鼠标距离屏幕左侧和上面的距离 一般很少用!!
//	   console.log(event.screenX, event.screenY);
	}
</script>