一、事件对象
事件：onmouseover、 onmouseout、 onclick
event //事件的对象

兼容写法：var event = event || window.event;

event常见属性，如下表：

属性

作用

data

返回拖拽对象的URL字符串（dragDrop）

width

该窗口或框架的高度

height

该窗口或框架的高度

pageX

光标相对于该网页的水平位置（ie无）

pageY

光标相对于该网页的垂直位置（ie无）

screenX

光标相对于该屏幕的水平位置

screenY

光标相对于该屏幕的垂直位置

target

该事件被传送到的对象

type

事件的类型

clientX

光标相对于该网页的水平位置 （当前可见区域）

clientY

光标相对于该网页的水平位置

二、pageX、 clientX、 screenX的区别

1、screenX 、screenY 以电脑屏幕为基准

2、pageX 、pageY 以文档（绝对定位）为基准 IE6、7、8不认识
3、clientX、   clientY 以可视区域为基准

三、其他事件

div.onmouseover  和div.onmousemove   区别

相同点都是 经过  div 才会触发

 div.onmouseover    只触发一次

div.onmousemove   每移动一像素，就会触发一次

 onmouseup       当鼠标弹起

onmousedown     当鼠标按下的时候

1、拖动 原理 ==   鼠标按下  接着 移动鼠标 。

bar.onmousedown = function(){

document.onmousemove = function(){

}

}

当我们按下鼠标的时候，就要记录当前 鼠标 的位置 - 大盒子的位置

1、 算出  bar  当前 在  大盒子内的距离 。

三、防止选择拖动

我们知道 按下鼠标然后拖拽可以选择文字 的。

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

案例：

1、鼠标点击跟随动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>鼠标点击跟随效果</title>

     <style>

         #image{

             width: 88px;

             position: absolute;

             left: 0;

             top:0;

         }

     </style>

 </head>

 <body>

 <img src="img.jpg" alt="" id="image">

 </body>

 </html>

 <script>

     /*document.onclick=function(event){

         var event=event||window.event;

         console.log(event.pageX);

         console.log(event.clientX);

         console.log(event.screenX);

     }*/

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

29     document.onclick=function(event){

30         var event=event||window.event;

31         targetX=event.clientX-image.offsetWidth/2;

32         targetY=event.clientY-image.offsetHeight/2;

     }

     //缓动动画

     var leaderX=0;

     var leaderY=0;

     var targetX=0;

     var targetY=0;

     setInterval(function(){

         leaderX=leaderX+(targetX-leaderX)/10;

41         leaderY=leaderY+(targetY-leaderY)/10;

42         image.style.left=leaderX+"px";

43         image.style.top=leaderY+"px";

     },10)

 </script>

运行效果：

第43天：事件对象event的更多相关文章

  1. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  2. 重新审视事件对象event

    前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之. ...

  3. 谈谈事件对象-event

    JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...

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

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

  5. jacascript 事件对象event

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.所有浏览 ...

  6. javaScript中的事件对象event

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  7. Javascript和jquery事件--事件对象event

    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...

  8. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

  9. js 事件对象event

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

  10. javaScript中的事件对象event是怎样

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

随机推荐

  1. linux——制作本地yum源

    1. 将windows系统中的linux镜像插入到linux系统的光驱中 2. 将光驱挂载到一个挂载点 3. 清缓存:yum clean all 4. 修改配置文件 /etc/yum.repos.d/ ...

  2. 10-第三方ClientCredential模式调用

    1-新建.net core控制台应用程序 E:\coding\netcore\IdentityServerSample>dotnet new console --name ThridPartDe ...

  3. Caliburn.Micro 杰的入门教程4，事件聚合器

    Caliburn.Micro 杰的入门教程1(原创翻译)Caliburn.Micro 杰的入门教程2 ,了解Data Binding 和 Events(原创翻译)Caliburn.Micro 杰的入门 ...

  4. asp.net微信公众平台本地调试设置

    1.首先要开启内网穿透功能,我这边使用自己搭建的ngrok内网穿透服务(具体如何搭建ngrok内网穿透服务,另开一篇说) 2.开启内网穿透后,即可实现互联网访问 www.tbkmama.cn 指向 1 ...

  5. 北京Uber优步司机奖励政策（12月11日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 南京Uber优步司机奖励政策（12月14日到12月20日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. CF813D Two Melodies(dp)

    题面 luogu Codeforces 题目大意: 给一个长度为\(n\)的序列,求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么相差\(1\)或者相差 ...

  8. android 8.0 Account行为变更 账号系统

    我们有个方法,是判断系统的账号有没有登录. public static boolean isAccountLogin(Context context) { String df = "com. ...

  9. 「日常训练」Bad Luck Island（Codeforces Round 301 Div.2 D）

    题意与分析(CodeForces 540D) 是一道概率dp题. 不过我没把它当dp做... 我就是凭着概率的直觉写的,还好这题不算难. 这题的重点在于考虑概率:他们喜相逢的概率是多少?考虑超几何分布 ...

  10. JSP学习（JavaBean）

    Java Web学习 一.搭建java web开发环境: (1)安装jdk (2)安装Tomcat服务器(Apache的开源项目),安装Tomcat并设置环境变量 (3)安装EclipseEE(或者M ...