龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

详解JS中event使用方法(1)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
本文向大家描述一下JS event使用方法,event的某些属性只对特定的事件有意义。比如,fromElement和toElement属性只对onmouseover和onmouseout事件有意义。 JS event使用方法详解 event代表事件的状态

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

JS event使用方法详解

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

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

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

  1. <HTML> 
  2. <HEAD><TITLE>CancelsLinks</TITLE> 
  3. <SCRIPTLANGUAGESCRIPTLANGUAGE="JScript">...  
  4. functioncancelLink()...{  
  5. if(window.event.srcElement.tagName=="A"&&window.event.shiftKey)  
  6. window.event.returnValue=false;  
  7. }  
  8. </SCRIPT> 
  9. <BODYonclickBODYonclick="cancelLink()"> 
  10.  

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

  1. <BODYonmousemoveBODYonmousemove="window.status='X='+window.event.x+  
  2. '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. <SCRIPTLANGUAGESCRIPTLANGUAGE="JScript"> 
  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. </SCRIPT> 
  11. <BODYonclickBODYonclick="showSrc()"> 
  12. <IMGonclickIMGonclick="checkCancel()"src="/sample.gif"> 
  13.  

4.clientX

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

语法:
event.clientX

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

5.clientY

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

语法:
event.clientY

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

精彩图集

赞助商链接