描述
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和onmouseout 事件有意义。

例子
下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。
<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 
window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">

<a href=http://google.cn>google</a>

</body>

下面的例子在状态栏上显示鼠标的当前位置。
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
属性：
type‚ button, srcElement/target‚ clientX‚ clientY‚ (offsetX‚ offsetY,)/(layerX,layerY), altKey‚ ctrlKey, shiftKey,keyCode , fromElement, toElement,  cancelBubble, returnValue , attachEvent(), detachEvent(), addEventListener(),removeEventListener(), screenX‚ screenY‚,  propertyName‚ srcFilter‚ x‚ y

1.type：返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click

2.srcElement/target：事件源，就是发生事件的元素；

3.button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键） 这个属性仅用于onmousedown‚ onmouseup‚ 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）。

4.clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和document.body.scrollTop)

5.offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置； x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数；

6.altKey,ctrlKey,shiftKey等：检查alt/ctrl/shift键的状态。返回一个布尔值；

7.keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

8.fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

例子：下面的代码演示了当鼠标移到按钮上时，弹出一个对话框，显示“mouse arrived”
<SCRIPT>
function testMouse(oObject) {
if(oObject.contains(event.toElement)) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

9.cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容10.层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">

11.returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false;相当于 e.preventDefault();)

12.attachEvent(),detachEvent()/addEventListener(),removeEventListener()：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

13.screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

14. propertyName
设置或返回元素的变化了的属性的名称。event.propertyName [ = sProperty ]
sProperty 是一个字符串，指定或返回触发事件的元素在事件中变化了的属性的名称。 
你可以通过使用 onpropertychange 事件，得到 propertyName 的值。
例子：
下面的例子通过使用 onpropertychange 事件，弹出一个对话框，显示 propertyName 的值。
<HEAD>
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new VALUE";
}
function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

15. srcFilter：返回触发 onfilterchange 事件的滤镜。

16.x/y: 返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象。

如果事件触发后，鼠标移出窗口外，则返回的值为 -1
这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。

一些说明：

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；
event对象只在事件发生的过程中才有效。 
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。 
下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null 
IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的onclick事件处理函数，再执行 div的事件处理函数。如果希望的事件处理函数执行完毕之后，不希望执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true即可。

Javascript技术之详尽解析event对象的更多相关文章

  1. Javascript防冒泡事件与Event对象

    防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...

  2. window.event对象详尽解析

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...

  3. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  4. javascript高级程序设计---Event对象

    事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...

  5. javascript事件与event对象的属性

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

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

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

  7. javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

    原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...

  8. javascript之event对象

    注意:以下给出的是在IE下的event事件说明,如果应用在非IE下可能会出现兼容性问题,需要结合具体的应用环境,使用兼容性的函数来处理 1.altKey 描述: 检查alt键的状态. 语法: even ...

  9. JavaScript使用浏览器内置XML解析器解析DOM对象

    所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器.解析器把 XML 转换为 XML DOM 对象 (可通过 JavaScript 操作的对象). 一.获取DOM对象 XMLHttpReq ...

随机推荐

  1. vue 中ref 的使用注意事项

    最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上 ...

  2. ansible的简单使用

    环境搭建跳过(暂无,这个以后再学习学习,不要在意这些细节) 首先,在环境搭建好后,用两台虚机来做测试,一台192.168.181.130做测试机,一台192.168.181.131为批量处理服务器 编 ...

  3. 10th 知识点学习：单元测试

    1.书中所在位置:构建之法第二章,19页—28页. 2.大致内容:书中是以案例的形式引入的介绍,具体讲述什么是单元测试,即程序员小飞进行练习单元测试,经过一系列的代码更改之后,终于成功实现.通过事后小 ...

  4. Load generator连接失败的解决办法！（转）

    环境:1.loadrunner control 一台物理机(win2008r2) 2.loadrunner agent 两台物理机(win2008r2) 问题:loadrunner control 连 ...

  5. 域名DNS解析说明

    一直都对域名DNS 解析很懵逼,今天看到一个博客上面详细的介绍了域名解析. 特意记录下: 记录类型: A记录: 将域名指向一个IPv4地址(例如:8.8.8.8)CNAME:将域名指向另一个域名(例如 ...

  6. 怎样使用ADO中的UpdateBatch方法(200分)

    诸位: 我在使用ADO组件(ADOQuery.ADODataSet)的BatchUpdate模式时,系统竟不认识UpdateBatch.CancelBatch方法.这是怎么回事?我的运行环境是Win2 ...

  7. C# 单例模式的多种简单实现

    什么是单例模式? 这里我就不做过多的解释了, 毕竟关于Singleton的资料实在是太多太多了.点击这里 1.简单的思路就是, 创建对象单例的动作转移到另外的行为上面, 利用一个行为去创建对象自身, ...

  8. Linux下如何确认磁盘是否为SSD

    方法 法1:通过查看/sys/block/sda/queue/rotational 通过cat /sys/block/sda/queue/rotational进行查看,返回值0即为SSD:返回1即为H ...

  9. springmvc+mybatis 实现分页查询

    为简化分页功能,设计了一个分页的JSP标签,只需要在页面使用分页标签,就可以完成所有页面的分页功能. 1. 项目结构和数据库设计 (1) 项目结构: (2) 数据库设计 2. PageModel.ja ...

  10. What Kind of Friends Are You? ZOJ - 3960（ZheJiang Province Contest）

    怎么说呢...我能说我又过了一道水题? emm... 问题描述: 给定 n 个待确定名字的 Friends 和 q 个问题.已知 c 个 Friends 的名字. 对于第 i 个问题,有  个 Fri ...