Event 对象

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

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

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

  1. 获取鼠标指针坐标
  2. 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事件对象的两个小练习 | 学习内容分享的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  3. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  4. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  5. DOM事件对象

    触发DOM上的事件时会产生一个事件对象event. event的内容:与事件有关的信息,导致事件的元素,事件的类型及其他与特定事件相关的信息. event对象会传入到事件处理程序中. 一.DOM 中的 ...

  6. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  7. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

  8. javascript中事件对象注册与删除

    事件对象 注册事件 直接给dom对象设置属性,只能给对象设置一个属性,如果设置多个事件处理函数,则最后的生效: 给html标签设置属性,(若法1和法2同时使用,则法1生效): 事件注册 绑定事件监听函 ...

  9. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

随机推荐

  1. CSS3摆动动画效果

    效果图:红包在左右摇晃 代码如下: @keyframes upAnimation { 0 % { transform: rotate(0 deg);transition - timing - func ...

  2. Docker Swarm：经济高效的容器调度

    本文探讨了几种容器调度策略,并以内存约束为例,讨论了如何利用Docker Swarm,通过资源约束实现容器的合理调度.其中,对容器资源的约束,包括硬约束和软约束,硬约束是指内存资源的实际限制条件,而软 ...

  3. 线段树动态开点+树链剖分BZOJ4999

    以每个一个颜色开一颗线段树,内部以dfs序作为线段树节点,权值代表出现次数,维护线段树区间和 #include<iostream> #include<stdio.h> #inc ...

  4. @atcoder - AGC036D@ Negative Cycle

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N 个点的有向带权图,从 0 编号到 N - 1.一开 ...

  5. Flask学习之十三 日期和时间

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xiii-dates-and-times 中文翻译地址: ...

  6. TCP/IP网络编程 读书笔记1

    本篇主干内容是TCP/IP网络编程1-9章学习笔记 1. linux文件描述符 描述符从3开始以由小到大的顺序编号,0,1,2,分配给标准I/O用作标准输入.标准输出和标准错误. 2. 协议族与套接字 ...

  7. OpenStack Nova启动实例流程

    1.概述 启动一个新的实例,会涉及到OpenStack Nova中的多个组件: API服务器,接收用户端的请求,并且将其传递给云控制器. 云控制器,处理计算节点.网络控制器.API服务器和调度器之前的 ...

  8. hdu 1548 A strange lift（迪杰斯特拉，邻接表）

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  9. 最小生成树kruskal算法、

    克鲁斯卡尔(kruskal) //kruskal算法生成最小生成树. //对边集数组Edge结构的定义 typedef struct { int begin; int end; int weight; ...

  10. centos linux mysql 10060远程错误代码

    Navicat for MySQL远程连接数据错误代码10060 1.登陆远程linux服务器命令界面 vim /etc/sysconfig/iptables  进入防火墙配置修改 增加以下两条防火墙 ...