js event-事件对象和clientX,clientY
event:事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。飞机-黑匣子。
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候
兼容：
ie/chrome:event是一个内置全局对象
标准下（火狐）：事件对象是通过事件函数的第一个参数传入
如果一个函数是被事件调用的那么这个函数定义的第一个参数就是事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
alert(event);//这里没事件发生
</script>
</head>
<body>
</body>
</html>
标准下（火狐）：事件对象是通过事件函数的第一个参数传入
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(){
alert(event);
}
fn1();//不是事件调用的函数
document.onclick = fn1();//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(ev){
var ev = ev || event;
alert(ev);
}
document.onclick = fn1;//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
function fn1(ev){
var ev = ev || event;
alert(ev);
for(var attr in ev){
console.log(attr + '=' + ev[attr]);
}
}
document.onclick = fn1;//是事件调用的函数，所以event有内容
</script>
</head>
<body>
</body>
</html>
onmousemove:当鼠标在一个元素上面移动的触发
触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
document.onmousemove = function(){
document.title = i++;
} }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
var oDiv = document.getElementById('div1');
document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX +'px';
oDiv.style.top = ev.clientY + 'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
红方块跟着鼠标走
注意：添加了一个高度，就出现问题了
ji
给的短了，所以显示出来就是方块在鼠标的上面，要想正常显示要加上滚动条滚动的距离
解决上面问题的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<script>
window.onload = function(){
var i=0;
var oDiv = document.getElementById('div1');
document.onmousemove = function(ev){
var ev = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = ev.clientX +'px';
oDiv.style.top = ev.clientY + scrollTop+'px';
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
js event-事件对象和clientX,clientY相关推荐
- js中event事件对象
1. event事件 概念: Event 对象代表事件的状态,当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如事件在其中发生的元素.键盘按键的状态.鼠标的位 ...
- js之event事件对象
...........仅对以前所学做复习记录使用......... 当一个事件发生的时候,这个事件的有关详细信息会临时保存到一个指定的地方,这个地方就是event事件对象. 每一个事件都有一个even ...
- js中事件对象event的兼容性问题
W3C标准规定,事件是作为函数的参数传入的,例如: <p id="demo">点击我将获得屏幕坐标</p> document.getElementById( ...
- 第53天：鼠标事件、event事件对象
-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果 一.鼠标事件 onclick ---------------鼠 ...
- JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
- js中事件对象event
一.Event对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 当一个事件发生的时候, ...
- 【js】event(事件对象)详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
- 【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
- JS Event事件
// 给一个element绑定一个针对event事件的响应 // 移除element对象对于event事件发生时执行某个函数 var box = document.getElementById(&qu ...
最新文章
- java md5 32位加密算法_java 32位md5加密类
- 从零开始数据科学与机器学习算法-朴素贝叶斯-07
- php用while循环做出1到10的乘积,PHP实现笛卡尔积算法的实例讲解
- Error:Could not find appcompat-v7.aar (com.android.support:appcompat-v7:26.1.0). Searched in the fol
- cross-domain policy file
- STM32F407 开发环境搭建 程序下载 个人笔记
- css不继承父类样式_提升你的Python编程能力，细说类的继承，拿走不谢
- EBS 请求输出Html报表集成Echarts
- 2016CCF-CCSP竞赛：第1题-虚拟机设计（共3题）
- 广义相对论-学习记录4-第三章-张量分析与黎曼几何1
- 如何在知网直接下载PDF格式的硕博士论文
- 差异表达基因变化倍数_差异基因表达分析，如何寻找差异表达的基因？
- 我收藏的一些RSS订阅频道
- 27.html的定位（position）和偏移量（offset）
- B40 - 基于STM32单片机的电热蚊香蓝牙控制系统
- 【渝粤题库】陕西师范大学152205 西方行政学说史 作业（专升本）
- 【Kernel】如何从kernel中获取cred结构体中的value
- 千寻定位服务接入指南
- 教你用OpenCV 和 Python实现圆物检测
- Python scapy抓包程序