Javascript 笔记与总结(2-16)事件对象
事件对象:事件发生的瞬间,发生位置、时间、鼠标按键、触发的节点等信息,被打包成一个对象,此对象,系统自动传递给事件函数的第一个参数。
【例】记录 鼠标划过图片时的事件对象
- <!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)事件对象的更多相关文章
- JavaScript(第二十四天)【事件对象】
JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的 ...
- vue 笔记,ref 及 $event 事件对象
本文仅用作简单记录 ref : 在标签上添加 ref = “name” ,表示获取当前元素节点 <input type="text" ref="info" ...
- Javascript 笔记与总结(1-6)Javascript 面向对象
在 JavaScript 中,有对象,没有类(但有构造函数). 在 JavaScript 中,对象不依赖于类而存在,可以直接生成. {key:value, key:value} 这种格式的对象,成为 ...
- Javascript 笔记与总结(2-8)对象2
注意:标签属性与 DOM 对象属性的对应关系,绝大部分 2 者是相同的,例如 imgobj.src 属性对应 <img src=""> 中的 src 属性 例外:< ...
- Javascript 笔记与总结(2-7)对象
html: <h1>找对象</h1> <div id="div1"> <p>p1</p> <p>p2< ...
- JavaScript 中的事件对象(读书笔记思维导图)
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含 ...
- JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- Javascript高级编程学习笔记(59)—— 事件(3)事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
随机推荐
- Linux下的ip命令,除了ifconfig还有很多
linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...
- 今天装了一个RTI工具
就是一个协议,需要在本机运行,今天天气有变,还要陈到家里来安装光纤宽带,昨天晚上家里下了一场雷电交加的大雨,电停了一会
- CI中自定义SQL查询,LIKE模糊查询的处理
参考: /** * 据用户输入的关键字查询相册信息;照片墙搜索框功能 * @param $keyWord 关键字 * @param $pageNum 页码,第几页 * @param $pageSize ...
- java web开发问题集合
前台和后台的交流到底是借助什么?servlet?xml? 我们能感觉到用servlet,但是我们是如何使用servlet的?不是现在web.xml部署后,才能触发吗?所以其实我们是本质是借助XML文件 ...
- SAE上传web应用(包括使用数据库)教程详解及问题解惑
转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...
- 那些年不错的Android开源项目
那些年不错的Android开源项目 转载自 eoe 那些年不错的Android开源项目-个性化控件篇 第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.Acti ...
- 神经网络:多层网络与C++实现
相关源码可参考最新的实现:https://github.com/ronnyyoung/EasyML ,中的neural_network模块,后持续更新,包括加入CNN的结构. 一.引言 在前一篇关于神 ...
- DP ZOJ 3872 Beauty of Array
题目传送门 /* DP:dp 表示当前输入的x前的包含x的子序列的和, 求和方法是找到之前出现x的位置(a[x])的区间内的子序列: sum 表示当前输入x前的所有和: a[x] 表示id: 详细解释 ...
- 初始化lpc2106开发工程
单片机型号:lpc2106.Init.s:初始化pc指针和sp指针. AREA Init, CODE, READONLY IMPORT test1_main EXPORT ...
- python 代码片段15
#coding=utf-8 ''' 如果运行时发生异常的话,解释器会查找相应的处理函数.要是在当前函数里没有 找到的话,它会将异常传递给上层的调用函数,看看那里能不能处理.如果在在最 外层还没有找到的 ...