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. shell学习(19)- find查找命令

    Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...

  2. 如何用django框架完整的写一个项目

    实现目标及功能,增删改,并且实现搜索,分页,日期插件,删除提示,以及批量导入等功能 软件版本: python3.5 django1.11 一  用pycharm创建一个项目,名字自定义 二 编辑url ...

  3. ROS报错:IOError:[Errno 13]permission denied: /home/neousys/.ros/roscore-11311.pid"

    在安装ROS后启动ROS,输入:roscore 时报错: 这个问题是由于该路径下ros文件权限造成的. 输入以下命令修改权限: sudo chmod -R ~/.ros/ 修改完成后再次输入rosco ...

  4. Python基础:15私有化

    默认情况下,属性在Python 中都是“public”. 1:双下划线(__) Python 为类元素(属性和方法)的私有性提供初步的形式.由双下划线开始的属性在运行时被“混淆”,所以直接访问是不允许 ...

  5. python代码实现树莓派3b+驱动步进电机

    python代码实现树莓派3b+驱动步进电机 之前买了个树莓派,刚买回来那会儿热情高涨,折腾了一段时间,然后就放那吃灰了.前几天忽然想起来这个东西了,决定再玩玩儿,于是就从某宝上购买了一套步进电机.驱 ...

  6. poj 3159 Candies (dij + heap)

    3159 -- Candies 明明找的是差分约束,然后就找到这题不知道为什么是求1~n的最短路的题了.然后自己无聊写了一个heap,518ms通过. 代码如下: #include <cstdi ...

  7. X-WAF 安装配置指南

    X-WAF 是一款方便易用的云WAF,使用反向代理的方式介入Web服务器和访问者之间,不需要像 modSecurity 和 Naxsin 那样作为nginx的模块,需要进行编译安装 X-WAF使用 O ...

  8. Android Studio(五):修改Android Studio项目包名

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  9. caffe 下一些参数的设置

    weight_decay防止过拟合的参数,使用方式:1 样本越多,该值越小2 模型参数越多,该值越大一般建议值:weight_decay: 0.0005 lr_mult,decay_mult关于偏置与 ...

  10. Python--day25--面向对象之多态

    多态(Python天生支持多态) 多态指的是一类事物有多种形态 动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): #同一类事物 ...