原文:http://jiajiale.iteye.com/blog/195906

javascript中event对象详解          博客分类:

    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()">
下面的例子在状态栏上显示鼠标的当前位置。
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y"> 属性:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 
--------------------------------------------------------------------------------
1.altKey 描述: 检查alt键的状态。
语法: event.altKey
可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。
2.button  描述: 检查按下的鼠标键。
语法: event.button
可能的值:  0 没按键  1 按左键  2 按右键  3 按左右键  4 按中间键  5 按左键和中间键  6 按右键和中间键  7 按所有的键 
这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。 3.cancelBubble 描述: 检测是否接受上层元素的事件的控制。
语法: event.cancelBubble[ = cancelBubble]
可能的值: 这是一个可读写的布尔值: 
TRUE 不被上层原素的事件控制。  FALSE 允许被上层元素的事件控制。这是默认值。
例子: 下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。
<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">
4.clientX 描述: 返回鼠标在窗口客户区域中的X坐标。 
语法: event.clientX
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
5.clientY 描述: 返回鼠标在窗口客户区域中的Y坐标。 
语法: event.clientY
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
6.ctrlKey 描述: 检查ctrl键的状态。
语法: event.ctrlKey
可能的值: 当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。
7.fromElement 描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement
语法: event.fromElement
注释: 这是个只读属性。
8.keyCode 描述: (请参考 http://www.joyist.com/forum/showtopic.asp?TOPIC_ID=31&Forum_ID=2)  检测键盘事件相对应的内码。 这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。
语法: event.keyCode[ = keyCode]
可能的值: 这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。
9.offsetX  描述: 检查相对于触发事件的对象,鼠标位置的水平坐标 
语法: event.offsetX
10.offsetY  描述: 检查相对于触发事件的对象,鼠标位置的垂直坐标 
语法: event.offsetY
11.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> <P>The event object property propertyName is  used here to return which property has been  altered.</P>
<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>
12.returnValue 描述: 设置或检查从事件中返回的值 
语法: event.returnValue[ = Boolean]
可能的值:  true 事件中的值被返回  false 源对象上事件的默认操作被取消 
例子见本文的开头。
13.screenX  描述: 检测鼠标相对于用户屏幕的水平位置 
语法: event.screenX
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
14.screenY  描述: 检测鼠标相对于用户屏幕的垂直位置 
语法: event.screenY
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
15.shiftKey 描述: 检查shift键的状态。
语法: event.shiftKey
可能的值: 当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。
16.srcElement 描述: 返回触发事件的元素。只读。例子见本文开头。
语法: event.srcElement
17.srcFilter  描述: 返回触发 onfilterchange 事件的滤镜。只读。
语法: event.srcFilter
18.toElement 描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement
语法: event.toElement
注释: 这是个只读属性。
例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“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>
19.type 描述: 返回事件名。
语法: event.type
注释: 返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click 只读。
20. x 描述: 返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
语法: event.x
注释: 如果事件触发后,鼠标移出窗口外,则返回的值为 -1 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
21. y 描述: 返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
语法: event.y
注释: 如果事件触发后,鼠标移出窗口外,则返回的值为 -1 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

(转)javascript中event对象详解的更多相关文章

  1. 【好文收藏】javascript中event对象详解

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

  2. JavaScript中数组对象详解

    Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var li ...

  3. JS中的event 对象详解

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

  4. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  5. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  6. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  7. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  8. django中request对象详解(转载)

    django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. ...

  9. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

随机推荐

  1. examine self thrice a day2016

    ----------------------------2016-----------------------  12.31.2016 2016年,感恩一路帮助过我的所有人!       每个人来到世 ...

  2. python中字符与ascii码转换

    ASCII码转字符用chr()函数:  字符转ASCII码用ord()函数:  

  3. JS禁止右键

    function cancelMouse(){return false;}document.oncontextmenu = cancelMouse;

  4. Objective-C(NSString、BOOL、多文件开发)

    NSString 表示oc当中的字符串类 %@是oc当中对象的格式符 printf不能打印oc当中的对象 通过stringWithFormat:这个类方法,打印格式化的字符串 例 int a = 10 ...

  5. Mahout推荐算法基础

    转载自(http://www.geek521.com/?p=1423) Mahout推荐算法分为以下几大类 GenericUserBasedRecommender 算法: 1.基于用户的相似度 2.相 ...

  6. 使用PL/SQL连接远程的Oracle数据库

    PL/SQL不仅可以连接本机的oracle数据库.也可以连接远程的数据库. 需要修改一个文件:在本机oracle 数据库的安装目录下找到这个文件: /oracle/ora92/network/admi ...

  7. ORACLE 一致性读原理记录

    什么是一致性读? 一致性读指的是在从查询那一刻起,中间的变化不予理会. 举例说明 比如我有两个帐户A,B. A 有1000块,B有1000快.我查询的时候查询速度比较慢.中间A转500到B账户. 已经 ...

  8. 从问题域出发认识Hadoop生态系统

    近些年来Hadoop生态系统发展迅猛,它本身包含的软件越来越多,同时带动了周边系统的繁荣发展.尤其是在分布式计算这一领域,系统繁多纷杂,时不时冒出一个系统,号称自己比MapReduce或者Hive高效 ...

  9. 构建之法<第四章>之感悟

    第四章:两人合作内容出处:4.6 两人合作的不同阶段和技巧 本章主要是讲关于合作方面的,文章以刚刚认识的两个人为例!也就是说,他们之前的关系是陌生人,然而在现实当中两人合作也可以有其它的关系,比如说合 ...

  10. zabbix邮件报警

    #!/usr/bin/python #coding:utf-8 import smtplib from email.mime.text import MIMEText import sys mail_ ...