事件对象:事件发生的瞬间,发生位置、时间、鼠标按键、触发的节点等信息,被打包成一个对象,此对象,系统自动传递给事件函数的第一个参数

【例】记录 鼠标划过图片时的事件对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <img src="a.bmp" width="300" alt="">
  9. </body>
  10. <script>
  11. document.getElementsByTagName("img")[0].onmouseover = function(e){
  12. console.log(e);
  13. }
  14. </script>
  15. </html>

此时 控制台 输出:

其中 target(IE 用的是 srcElement,标准 Event 属性是 target) 表示触发事件时所在的 DOM 对象。

另,以下写法是因为在 IE 低版本下,事件对象并不是放在事件函数的第一个参数中,而是放在 window 的 event 属性中:

  1. document.getElementsByTagName("img")[0].onmouseover = function(e){
  2. e = window.event || e;
  3. }

【例】点不中的图片

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. img{
  8. position:relative;
  9. left:0px;
  10. top:0px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <img src="a.bmp" width="300" alt="">
  16. </body>
  17. <script>
  18. document.getElementsByTagName("img")[0].onmouseover = function(e){
  19. this.style.left = e.pageX + 10 + "px";
  20. this.style.top = e.pageY + 10 + "px";
  21. }
  22. </script>
  23. </html>

Javascript 笔记与总结(2-16)事件对象的更多相关文章

  1. JavaScript(第二十四天)【事件对象】

    JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的 ...

  2. vue 笔记,ref 及 $event 事件对象

    本文仅用作简单记录 ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 <input type="text" ref="info" ...

  3. Javascript 笔记与总结(1-6)Javascript 面向对象

    在 JavaScript 中,有对象,没有类(但有构造函数). 在 JavaScript 中,对象不依赖于类而存在,可以直接生成. {key:value, key:value} 这种格式的对象,成为 ...

  4. Javascript 笔记与总结(2-8)对象2

    注意:标签属性与 DOM 对象属性的对应关系,绝大部分 2 者是相同的,例如 imgobj.src 属性对应 <img src=""> 中的 src 属性 例外:< ...

  5. Javascript 笔记与总结(2-7)对象

    html: <h1>找对象</h1> <div id="div1"> <p>p1</p> <p>p2< ...

  6. JavaScript 中的事件对象(读书笔记思维导图)

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

  7. JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  8. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  9. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

随机推荐

  1. Linux下的ip命令,除了ifconfig还有很多

    linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...

  2. 今天装了一个RTI工具

    就是一个协议,需要在本机运行,今天天气有变,还要陈到家里来安装光纤宽带,昨天晚上家里下了一场雷电交加的大雨,电停了一会

  3. CI中自定义SQL查询,LIKE模糊查询的处理

    参考: /** * 据用户输入的关键字查询相册信息;照片墙搜索框功能 * @param $keyWord 关键字 * @param $pageNum 页码,第几页 * @param $pageSize ...

  4. java web开发问题集合

    前台和后台的交流到底是借助什么?servlet?xml? 我们能感觉到用servlet,但是我们是如何使用servlet的?不是现在web.xml部署后,才能触发吗?所以其实我们是本质是借助XML文件 ...

  5. SAE上传web应用(包括使用数据库)教程详解及问题解惑

    转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...

  6. 那些年不错的Android开源项目

    那些年不错的Android开源项目 转载自 eoe 那些年不错的Android开源项目-个性化控件篇 第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.Acti ...

  7. 神经网络:多层网络与C++实现

    相关源码可参考最新的实现:https://github.com/ronnyyoung/EasyML ,中的neural_network模块,后持续更新,包括加入CNN的结构. 一.引言 在前一篇关于神 ...

  8. DP ZOJ 3872 Beauty of Array

    题目传送门 /* DP:dp 表示当前输入的x前的包含x的子序列的和, 求和方法是找到之前出现x的位置(a[x])的区间内的子序列: sum 表示当前输入x前的所有和: a[x] 表示id: 详细解释 ...

  9. 初始化lpc2106开发工程

    单片机型号:lpc2106.Init.s:初始化pc指针和sp指针.    AREA    Init, CODE, READONLY    IMPORT  test1_main    EXPORT  ...

  10. python 代码片段15

    #coding=utf-8 ''' 如果运行时发生异常的话,解释器会查找相应的处理函数.要是在当前函数里没有 找到的话,它会将异常传递给上层的调用函数,看看那里能不能处理.如果在在最 外层还没有找到的 ...