详解JS中event使用方法
创始人
2024-07-15 15:50:23
0

本文向大家描述一下JS event使用方法,event的某些属性只对特定的事件有意义。比如,fromElement和toElement属性只对onmouseover和onmouseout事件有意义。

JS event使用方法详解

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。

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

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

  1.  
  2. CancelsLinks 
  3. ...  
  4. functioncancelLink()...{  
  5. if(window.event.srcElement.tagName=="A"&&window.event.shiftKey)  
  6. window.event.returnValue=false;  
  7. }  
  8.  
  9.  
  10.  

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

  1. 'Y='+window.event.y"> 

属性:

  1. altKey,button,cancelBubble,clientX,clientY,  
  2. ctrlKey,fromElement,keyCode,offsetX,offsetY,  
  3. propertyName,returnValue,screenX,screenY,shiftKey,  
  4. 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()函数。

  1.  
  2. functioncheckCancel()...{  
  3. if(window.event.shiftKey)  
  4. window.event.cancelBubble=true;  
  5. }  
  6. functionshowSrc()...{  
  7. if(window.event.srcElement.tagName=="IMG")  
  8. alert(window.event.srcElement.src);  
  9. }  
  10.  
  11.  
  12.  
  13.  

 4.clientX

描述:
返回鼠标在窗口客户区域中的X坐标。

语法:
event.clientX

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

5.clientY

描述:
返回鼠标在窗口客户区域中的Y坐标。

语法:
event.clientY

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

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

#p#

11.propertyName

描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName[=sProperty]

可能的值:
sProperty是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用onpropertychange事件,得到propertyName的值。

例子:
下面的例子通过使用onpropertychange事件,弹出一个对话框,显示propertyName的值。 

  1.  
  2.  
  3.  
  4.  
  5. TheeventobjectpropertypropertyNameis  

  6. usedheretoreturnwhichpropertyhasbeen  
  7. altered.

     
  8.  
  9. VALUE="ClicktochangetheVALUEpropertyofthisbutton" 
  10. onpropertychange='alert(event.propertyName+"propertyhaschangedvalue")'> 
  11. onclick="changeCSSProp()" 
  12. VALUE="ClicktochangetheCSSbackgroundColorpropertyofthisbutton" 
  13. onpropertychange='alert(event.propertyName+"propertyhaschangedvalue")'> 
  14.  
  15.  

 12.returnValue

描述:
设置或检查从事件中返回的值

语法:
event.returnValue[=Boolean]

可能的值:
true事件中的值被返回
false源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX

描述:
检测鼠标相对于用户屏幕的水平位置

语法:
event.screenX

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

14.screenY

描述:
检测鼠标相对于用户屏幕的垂直位置

语法:
event.screenY

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

15.shiftKey

描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为TRUE,否则为FALSE。只读。#p#

16.srcElement

描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement

17.srcFilter

描述:
返回触发onfilterchange事件的滤镜。只读。

语法:
event.srcFilter

18.toElement

描述:
检测onmouseover和onmouseout事件发生时,鼠标所进入的元素。参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mousearrived” 

  1.  
  2.  
  3.  
  4. MouseOverThis. 
  5.  

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

【编辑推荐】

  1. 解析JS中定义Function的两种实用方法
  2. JS中Array数组的三大属性用法揭秘
  3. prototype.js的Ajax对IE8兼容问题解决方案
  4. 专家提醒 IE下JS编程中需注意内存释放问题
  5. JavaScript调试工具解决IE6等多版本共存问题 


 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...