PS:转自https://www.cnblogs.com/songyaqi/p/5204143.html

1. 事件对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 事件通常与函数结合使用,函数不会在事件发生前被执行!

2. 关于event对象

(1)在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.

以下是event对象的一些属性和方法

属性 描述
altKey 返回当事件被触发时,”ALT” 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,”CTRL” 键是否被按下
metaKey 返回当事件被触发时,”meta” 键是否被按下。
relatedTarget    返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。    
shiftKey 返回当事件被触发时,”SHIFT” 键是否被按下

(2)除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性

属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup
offsetX,offsetY   发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

(3)标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。

属性和方法 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation()

不再派发事件。

3.Event对象的一些兼容性写法

    • 获得event对象兼容性写法 
      event || (event = window.event);
    • 获得target兼容型写法 
      event.target||event.srcElement
    • 阻止浏览器默认行为兼容性写法 
      event.preventDefault ? event.preventDefault() : (event.returnValue = false);
    • 阻止冒泡写法 
      event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

4.clientX、pageX、screenX

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。

pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动

offsetX:相对于触发事件元素的左上角的偏移。但在不同的浏览器中其值又有所不同。在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值。

layerX:是相对于position为absolute或relative的父元素胡外边缘的距离

不同浏览器对这些属性的支持:

5.获得页面中某个元素的位置

function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;//定位父级,实际为body
//如果定位父级不为空,元素的实际定位等于定位父级的left+元素的left
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
//将body的定位父级设为current,body没有定位父级,current为空,结束循环
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}

event——事件对象详解的更多相关文章

  1. 【js】event(事件对象)详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  2. javascript中window.event事件用法详解

    转自http://www.jb51.net/article/32564.htm描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生 ...

  3. mysql的event(事件)用法详解

    SELECT * FROM mysql.event;SET GLOBAL event_scheduler = 1; -- 开启定时器 0:off 1:on SHOW VARIABLES LIKE 'e ...

  4. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  5. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  6. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  7. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  8. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  9. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

随机推荐

  1. SQL 优化总结(三) SQL子句

    SQL子句 尽可能编写优化器可以优化的语句. 1. SELECT子句 (1) 在查询Select语句中用Where字句限制返回的行数,避免表扫描,如果返回不必要的数据,浪费了服务器的I/O资源,加重了 ...

  2. Pmod使用的4种模式

    引言 多年以来,一直存在标准泛滥的现象,而我们电子业尤其严重.您是否曾经想过,为什么我们对有些奇怪的数字或测量计的东西建立标准?关于航天飞机的固体燃料火箭推进器的直径是否真的源自于马屁股的宽度的讨论非 ...

  3. 最短路径 一 Dijkstra 模板(O(n^2))

    题目传送:http://hihocoder.com/problemset/problem/1081 #include<iostream> #include<cstdio> #i ...

  4. matlab形态学图像处理之strel函数

    转自:http://blog.sina.com.cn/s/blog_b1cd5d330101pmwi.html strel--structuring element 运用各种形状和大小构造元素,基本语 ...

  5. Windows平台Python编程必会模块之pywin32

    在Windows平台上,从原来使用C/C++编写原生EXE程序,到使用Python编写一些常用脚本程序,成熟的模块的使用使得编程效率大大提高了. 不过,python模块虽多,也不可能满足开发者的所有需 ...

  6. 【236】◀▶IEW-Unit01

    Unit 1  Fast Food I.动名词的用法 Doing(V-ing) 核心思想:词性是名词,作用是动词 1. 名词 3)主语(句首) 保护环境是我们每个人的责任. Protecting th ...

  7. VMware10中安装centos7没有可用的网络设备

    1.问题描述 centos7安装到虚拟机无法上网   2.安装环境 win7 x64  WM 10.01 iso  CentOS-7-x86_64-DVD-1503-01.iso  {4.01G}   ...

  8. MySQL 之 导出导入数据

    导出数据库(sql脚本)  mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p --databases db_name > test ...

  9. Jquery中的toggle()方法

    Jquery中的toggle()方法,有一次在看别人写的Jquery插件时,发现对toggle有如下使用 search.pagePrevious.toggle(data.pageNumber > ...

  10. HDU 2112 HDU Today Dij+map转化

    HDU Today 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并 ...