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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="a.bmp" width="300" alt="">

</body>

<script>

    document.getElementsByTagName("img")[0].onmouseover = function(e){

        console.log(e);

    }

</script>

</html>

此时 控制台 输出：

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

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

    document.getElementsByTagName("img")[0].onmouseover = function(e){

        e = window.event || e;

    }

【例】点不中的图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        img{

            position:relative;

            left:0px;

            top:0px;

        }

    </style>

</head>

<body>

    <img src="a.bmp" width="300" alt="">

</body>

<script>

    document.getElementsByTagName("img")[0].onmouseover = function(e){

        this.style.left = e.pageX + 10 + "px";

        this.style.top = e.pageY + 10 + "px";

    }

</script>

</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. Android自定义progressBar

    通过继承系统ProgressBar实现 效果图 实现 HorizontalProgressBarWithNumber 自定义属性 <?xml version="1.0" en ...

  2. linux下常见的文件夹含义

    1./bin :获得最小的系统可操作性所需要的命令2./boot :内核和加载内核所需的文件3./dev :终端.磁盘.调制解调器等的设备项4./etc :关键的启动文件和配置文件5./home :用 ...

  3. Linux网络编程入门 (转载)

    (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端         网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户 ...

  4. ASP.NET MVC那些事

    MVC的由来: 在MVC模式之前,View界面的呈现.用户交互操作的捕捉与相应.业务流程的执行以及数据的存储等都是在一起的,这种设计模式叫自治视图. 这重设计模式主要存在三大弊端: 重用性:业务逻辑与 ...

  5. Xamarin.Android开发实践（十四）

    Xamarin.Android之ListView和Adapter 一.前言 如今不管任何应用都能够看到列表的存在,而本章我们将学习如何使用Xamarin去实现它,以及如何使用适配器和自定义适配器(本文 ...

  6. H264码流打包分析

    转自:http://www.360doc.com/content/13/0124/08/9008018_262076786.shtml   SODB 数据比特串-->最原始的编码数据 RBSP ...

  7. SQLServer中临时表与表变量的区别分析(转)

    在实际使用的时候,我们如何灵活的在存储过程中运用它们,虽然它们实现的功能基本上是一样的,可如何在一个存储过程中有时候去使用临时表而不使用表变量,有时候去使用表变量而不使用临时表呢? 临时表 临时表与永 ...

  8. hdu 1455 Sticks

    Sticks Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  9. 在Linux下搭建SVN服务器

    svn不仅仅可以用于程序开发,还可以做很多事情,例如备份文档. CentOS下:安装 这样同一台服务器便可以运行多个svnserver了 检查端口 注:如果修改了svn配置,需要重启svn服务 -j ...

  10. 使用NGUINGUI的相关介绍

    1.3  使用NGUI 要使用NGUI,需要首先为游戏项目导入NGUI插件资源,然后再创建UI Root对象,在这以后才可以添加各种UI控件,下面本节会详解介绍这些知识本文选自NGUI从入门到实战! ...