WEB前端 | JS基础——(9)JS事件01

本文链接：https://blog.youkuaiyun.com/Erosvan/article/details/52979401

本文介绍了一个简单的HTML页面中使用JavaScript实现的基本事件处理方法，包括点击事件、上下文菜单事件等。通过实例展示了如何通过事件对象获取点击位置的坐标，并提供了一种兼容不同浏览器的事件对象获取方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>JS事件01</title>
		<style type="text/css">
			.reddiv{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="reddiv">
			
		</div>
	</body>
	<script type="text/javascript">
	// 事件 
	// onclick  鼠标点击
	// onmouseover/onmouseenter 鼠标移入 
	// onmouseout/onmouseleave 鼠标移出
	// window.onscroll 滑动页面
		var reddiv = document.getElementsByClassName('reddiv')[0];
		reddiv.onclick = function(sss){
			// 可以通过window.event来获取到当前事件的对象，通过这个对象来查看这个事件的详细信息 比如：clientX/Y 获取点击的点的坐标
			console.log('点击了红色的div');
			console.log('x:' + sss.clientX + ' y:' + sss.clientY);
			console.log(window.event);
			// 由于火狐浏览器不支持window.event,所以我们可以通过接收系统调用函数的时候传过来的参数来获取到事件对象。（在方法里面添加一个形参， 这个形参就是事件对象）
			// 兼容的写法。
			var evObject = window.event || sss;
		};

		function test(sb){
			console.log(sb * 2);
		}
		test(4);
		document.oncontextmenu = function (){
			console.log('a');
            return false;
		}
	</script>
</html>