JavaScript DOM事件对象的两个小练习

Event 对象

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

事件通常与函数结合使用，函数不会在事件发生前被执行！

本文用于记录个人学习过程中的两个小练习，其中包括事件对象的一些用法和问题的解决以及兼容性问题

获取鼠标指针坐标
div跟随鼠标移动

练习

1 获取鼠标指针坐标

两个div，当鼠标在上面的div#areaDiv移动时，在下面的div#showMsg中显示鼠标指针坐标

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#areaDiv{

				width: 500px;

				height: 200px;

				border: 1px solid black;

			}

			#showMsg{

				width: 500px;

				height: 50px;

				margin-top: 20px;

				border: 1px solid black;

			}

		</style>

		<script type="text/javascript">

			window.onload = function(){

				/*

				 * 当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标

				 */

				//获取div

				var areaDiv = document.getElementById("areaDiv");

				var showMsg = document.getElementById("showMsg");

				/*

				 * 事件对象

				 * 	- 当事件的响应函数被触发时，浏览器会将一个事件对象作为实参传递进响应函数，

				 * 		在事件对象中封装了当前事件相关的一切信息，比如：鼠标指针的坐标，键盘哪个按键被按下

				 */

				areaDiv.onmousemove = function(event){

					/*

					 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象

					 * 	而是将事件对象作为window对象的属性保存的	window.event

					 * 但此方法不兼容火狐

					 */

					/*解决兼容问题，使用if判断

					if(!event){

						event = window.event;

					}*/

					//此方法更简单方便

					event = event || window.event;	

					/*		获取坐标值

					 * 	clientX	可以获取鼠标指针的水平坐标

					 * 	clientY	可以获取鼠标指针的垂直坐标

					 */

					var x = event.clientX;

					var y = event.clientY;

					//显示坐标值

					showMsg.innerHTML = 'x='+x+' , y='+y;

				};

			};

		</script>

	</head>

	<body>

		<div id="areaDiv"></div>

		<div id="showMsg"></div>

	</body>

</html>

2 div跟随鼠标移动

当鼠标在页面中移动时，使div跟随其移动

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>div跟随鼠标移动</title>

		<style type="text/css">

			body{ width:2000px; height: 1000px;}   /*使页面出现滚动条*/

			#box1{

				width: 100px;

				height: 100px;

				background-color: red;

				position: absolute;

			}

		</style>

		<script type="text/javascript">

			window.onload = function(){

				var box1 = document.getElementById("box1");

				//使div可以跟随鼠标移动，响应函数加给document

				document.onmousemove = function(event){

					event = event || window.event;

					//获取滚动条滚动距离

					var st = document.documentElement.scrollTop;

					var sl = document.documentElement.scrollLeft;

					//获取鼠标指针坐标

					/*	clientX、clientY

					 * 用于获取当前可见窗口的鼠标坐标

					 * 而div的偏移量是相对整个页面的

					 *

					 * pageX、pageY可以获取鼠标相对当前页面的坐标

					 * 	但是不兼容IE8及以下

					 *

					 *	因此我们选择获取滚动条滚动距离，将其加到div的偏移量上

					 */

					var left = event.clientX;

					var top = event.clientY;

					//设置div偏移量

					box1.style.left = left +sl+'px';

					box1.style.top = top +st+'px';

				};

			};

		</script>

	</head>

	<body>

		<div id="box1"></div>

	</body>

</html>

部分内容来源于网上教程，侵删。

巴特西

JavaScript DOM事件对象的两个小练习 | 学习内容分享

Event 对象

练习

1 获取鼠标指针坐标

2 div跟随鼠标移动

最新文章

热门文章