JS event的属性


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

事件通常与函数结合使用,函数不会在事件发生前被执行!

event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 

下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。 

function cancelLink() ...{ 

if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 

window.event.returnValue = false; 

下面的例子在状态栏上显示鼠标的当前位置。 

属性: 

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()函数。 

function checkCancel() ...{ 

if (window.event.shiftKey) 

window.event.cancelBubble = true; 

function showSrc() ...{ 

if (window.event.srcElement.tagName == "IMG") 

alert(window.event.srcElement.src); 

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 

描述: 

检测键盘事件相对应的内码。 

这个属性用于 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 的值。 

... 

function changeProp()...{ 

btnProp.value = "This is the new VALUE"; 

function changeCSSProp()...{ 

btnStyleProp.style.backgroundColor = "aqua"; 

The event object property propertyName is 

used here to return which property has been 

altered. 

VALUE="Click to change the VALUE property of this button" 

onpropertychange='alert(event.propertyName+" property has changed value")'> 

onclick="changeCSSProp()" 

VALUE="Click to change the CSS backgroundColor property of this button" 

onpropertychange='alert(event.propertyName+" property has changed value")'> 

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” 

 

function testMouse(oObject) ...{ 

if(oObject.contains(event.toElement)) ...{ 

      alert("mouse arrived"); 

   } 

Mouse Over This. 

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 

这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,483评论 1 11
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,940评论 6 13
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,113评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,465评论 1 45
  • 下午在回泉州的高铁上,和陆辉、李霞在聊起第一天上午做动态静心的这个环节,我领到一张瑜珈垫,我的第一个反应就是要在这...
    郭福顺阅读 355评论 3 12