JS中的event对象

最新推荐文章于 2024-02-19 15:43:50 发布

-Sloth-

最新推荐文章于 2024-02-19 15:43:50 发布

阅读量6.2k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_29882585/article/details/52336112

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

它是事件绑定中的一个隐藏参数，即实参，可以使用arguments[0]来获取。但是这样比较麻烦，所以我们采取传递一个形参来获取它。

例如：var e = event || window.event;考虑到兼容性。

三个属性：

event.offsetX:鼠标相对于点击元素左边的水平距离位置

event.clientX:鼠标相对于可视区域左侧的水平位置（使用最多）

event.screenX:鼠标相对于屏幕左侧的水平位置

有时因为我们的页面过长或者过宽，到时窗口出现滚动条，这时当滚动条滚动时，获取到的鼠标位置就不是在页面上的绝对位置，而只是在可视区域的位置，我们可以这样：

event.clientX+ (document.documentElement.scrollLeft|| document.body.scrollLeft);

event.clientY+(document.documentElement.scrollTop|| document.body.scrollTop);

其中document.documentElement和document.body都是获取<body>标签。

禁止右键操作：

document.oncontextmenu = function(e){
e.preventDefault();

实现鼠标点击显示当前的坐标的小例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Event</title>
	</head>
	<script type="text/javascript">
		function showcoords(e) {
			var e = event || window.event;
			var x = e.clientX;
			// 	var x = e.screenX;
			var y = e.clientY;
			//  	var y = e.screenY;
			document.getElementById("d").innerHTML = "X:" + x + " " + "Y:" + y;
		}
	</script>

	<body οnmοusedοwn="showcoords(event)">
		<div id="d" style="width: 600px; height: 600px;background: #0f0;margin: 0 auto;"></div>

	</body>

</html>

键盘事件实例：

<script type="text/javascript">
		document.onkeydown = function() {
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if (e.keyCode == 113) { // 按 F2 
				alert(1);
			}
		};
	</script>