（js）事件对象练习

最新推荐文章于 2022-11-20 19:58:59 发布

原创

最新推荐文章于 2022-11-20 19:58:59 发布 · 590 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中的事件对象，当事件响应函数触发时，浏览器会传入事件对象，其中包含了详细信息，如鼠标位置和滚轮方向。以onmousemove事件为例，当鼠标在特定区域移动时，能够显示鼠标的坐标。文章高度评价了李立超老师的教学质量。

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

事件对象
—当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
—在事件对象中封装了当前对象的一切信息（鼠标的位置,鼠标滚轮滚动方向）

onmousemove
—该事件会在鼠标移动时被触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件对象</title>
		<style type="text/css">
		#areaDiv{
			width:500px ;
			height: 150px;
			border: 1px solid black;
		}	
		#showMsg{
			width: 500px;
			height: 50px;
			border: 1px solid black;
		}	
		</style>
		<script type="text/javascript">
			window.function(){
				/*
				 * 实现如下功能：
				 * 当鼠标在areaDiv上移动时，在showMsg里显示鼠标的坐标
				 */
				//获取两个div
				var areaDiv=document.getElementById("areaDiv");
				var showMsg=document.getElementById("showMsg");
				/*
				 * onmousemove
				 * 该事件会在鼠标移动时被触发
				 */
				/*
				 * 事件对象
				 * ---当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
				 * 在事件对象中封装了当前对象的一切信息（鼠标的位置,鼠标滚轮滚动方向）
				 */
				areaDiv.function(event){
					var x=window.event.clientX;//获取鼠标指针水平坐标
					var