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事件对象的两个小练习 | 学习内容分享的更多相关文章
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- JavaScript DOM 事件模型
JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...
- HTML DOM 事件对象
HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...
- DOM事件对象
触发DOM上的事件时会产生一个事件对象event. event的内容:与事件有关的信息,导致事件的元素,事件的类型及其他与特定事件相关的信息. event对象会传入到事件处理程序中. 一.DOM 中的 ...
- JavaScript Dom 事件
JavaScript Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
- JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
- javascript中事件对象注册与删除
事件对象 注册事件 直接给dom对象设置属性,只能给对象设置一个属性,如果设置多个事件处理函数,则最后的生效: 给html标签设置属性,(若法1和法2同时使用,则法1生效): 事件注册 绑定事件监听函 ...
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
随机推荐
- 预警| Confluence 高危漏洞被大规模利用，阿里云WAF接入即可防护，支持免费应急服务
2019年4月4日,阿里云安全应急响应中心监测到Confluence 官方发布安全更新指出,Widget Connector 存在服务端模板注入漏洞,攻击者能利用此漏洞实现目录穿越遍历甚至远程命令执行 ...
- MAYA安装失败怎样卸载重新安装MAYA，解决MAYA安装失败的方法总结
技术帖:MAYA没有按照正确方式卸载,导致MAYA安装失败.楼主也查过网上关于如何解决MAYA安装失败的一些文章,是说删除几个MAYA文件和MAYA软件注册表就可以解决MAYA安装失败的问题,实际的情 ...
- jQuery 加法计算 使用+号即强转类型
var value1 = $("#txt1").val(); var value2 = $("#txt2").val(); //数值前添加+号 number加号 ...
- @codechef - SONATR@ Sonya and Tree
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 p 为 0~N-1 的一个排列,并给定一棵 N 个点的树. ...
- @雅礼集训01/13 - T1@ union
目录 @description@ @solution@ @part - 1@ @part - 2@ @part - 3@ @accepted code@ @details@ @description@ ...
- oracle中=>是什么意思呢？
=> 是 Oracle 中调用 存储过程的时候, 指定 参数名进行调用.一般是, 某些参数有默认值的时候,你需要跳过某些参数来进行调用.下面是具体的例子. 参数的默认值SQL> CREAT ...
- 一个简单的hexo搭建博客网站的故事
首先安装hexo mkdir hexo #创建一个文件夹 cd hexo #切换到hexo目录下面 npm install -g hexo-cli npm install hexo --save 然后 ...
- H3C ISDN功能组和参考点
- Python--day19--time模块
时间戳转化成结构化时间: 本地时间转换成时间字符串: 时间模块 和时间有关系的我们就要用到时间模块.在使用模块之前,应该首先导入这个模块. #常用方法 1.time.sleep(secs) (线程)推 ...
- 条件随机场(CRF) - 3 - 概率计算问题
声明: 1,本篇为个人对<2012.李航.统计学习方法.pdf>的学习总结,不得用作商用,欢迎转载,但请注明出处(即:本帖地址). 2,由于本人在学习初始时有很多数学知识都已忘记,所以为了 ...