【前端学习】JavaScript事件对象和属性

最新推荐文章于 2023-01-09 09:48:23 发布

咕咕1999

最新推荐文章于 2023-01-09 09:48:23 发布

阅读量183

点赞数

分类专栏： JavaScript学习笔记文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_44796493/article/details/104174768

版权

JavaScript学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

·高级浏览器的事件对象
·IE浏览器中的事件对象
·高级浏览器 IE浏览器兼容方式

当函数执行的时候，会产生一系列信息，浏览器会将这些信息收集起来并封装成对象传递到事件对象中。

·高级浏览器的事件对象

·对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 400px;
			height: 400px;
			margin: 0 auto;
			background-color: red;
		}
		
	</style>
</head>
<body>
	<div id="box">		
	</div>
	<script type="text/javascript">	
	var box = document.getElementById("box");
	
	box.onclick = function(e) {		
		console.log(e);
	}
	</script>
</body>
</html>

在这里插入图片描述

·属性

·offsetX offsetY

标记的是鼠标位于元素内部的位置，会受到子元素的影响。

·clientX clientY

标记的是鼠标位于视口中的位置。

·pageX pageY

标记的是鼠标位于页面中的位置。

当页面打开的时候默认是首屏的位置，此时clientX，clientY与pageX,pageY的值是相同的，当页面滚动条位置改变之后，它们的值将不一致。

·screenX screenY

这标记的是鼠标位于屏幕中的位置。

·IE浏览器中的事件对象

IE中没有将事件对象传递到函数中，而是在window.event身上
IE中不能直接输出，用for in循环输出：

box.onclick = function(e) {
	console.log(e);
	console.log(window.event); //不能展开显示
	for (var i in window.event) {
		console.log(i);
	}
}

·高级浏览器 IE浏览器兼容方式

box.onclick = function(e) {
	var e = e || window.event；
	console.log(e);
}

咕咕1999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端学习】JavaScript事件对象和属性

文章目录·高级浏览器的事件对象·对象·属性·offsetX offsetY·clientX clientY·pageX pageY·screenX screenY·IE浏览器中的事件对象·高级浏览器 IE浏览器兼容方式当函数执行的时候，会产生一系列信息，浏览器会将这些信息收集起来并封装成对象传递到事件对象中。·高级浏览器的事件对象·对象<!DOCTYPE html><h...
复制链接

扫一扫