window.event详细属性

迈不过友情╰ 2022-06-05 23:00 243阅读 0赞

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

2、属性：

3、属性详细说明：

<table style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51)"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 属性名</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 描述</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 值</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 说明</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> altKey</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 检查alt键的状态</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 当alt键按下时，值为True否则为False</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> shiftKey</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 检查shift键的状态</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 当shift键按下时，值为True否则为False</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ctrlKey</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 检查ctrl键的状态</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 当ctrl键按下时，值为True否则为False</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 例：(点击按钮时显示那几个特殊键按下的状态) &lt;input type="button" value="点击" onClick="showState()"/&gt; &lt;script&gt; function show(){ &nbsp;alert("altKey："+window.event.altKey &nbsp;&nbsp;+"\nshiftKey："+window.event.shiftKey &nbsp;&nbsp;+"\nctrlKey："+window.event.ctrlKey); }&lt;/script&gt;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;keyCode</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;检测键盘事件相对应的内码</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;可读写，可以是任何一个Unicode键盘内码。如果没有引发键盘事件，则该值为0</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 例：（按回车键让下一组件得到焦点，相当按Tab键） &lt;input type="text" onKeyDown="nextBlur()"/&gt; &lt;input type="text"/&gt; &lt;script&gt; function nextBlur(){ &nbsp;if(window.event.keyCode==13)//回车键的 code &nbsp;&nbsp;window.event.keyCode=9;//Tab键的code } &lt;/script&gt;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;srcElement</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;返回触发事件的元素</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;Object</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 例：（点击按钮时显示按钮的name值） &lt;input type="button" value="闽" name="福建" onClick="show()"/&gt; &lt;input type="button" value="赣" name="江西" onClick="show()"/&gt; &lt;script&gt; function show(){ &nbsp;alert(window.event.srcElement.name); } &lt;/script&gt;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;x,y</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;鼠标相对于当前浏览器的位置</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;px</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;clientX,clientY</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;鼠标当前相对于网页的位置</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;px</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;offsetX,offsetY</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;鼠标当前相对于网页中的某一区域的位置</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;px</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;screenX,screenY</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;相对于用户显示器的位置</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;px</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 说明：当你点击一个按钮时得到（x，clientX，offsetX，screenX）很容易明白offsetX；当你把IE窗口还原后得到（x，clientX，screenX），你就会明白screenX；当你把div的属性position在absolute和relative之间切换时，你就会明白x和clientX的区别。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;returnValue</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;设置或检查从事件中返回的值</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;true 事件中的值被返回&nbsp; false 源对象上事件的默认操作被取消</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;可读写</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="4" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 例如：屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 function KeyDown(){&nbsp; &nbsp;//屏蔽鼠标右键、Ctrl+N、Shift+F10、F5刷新、退格键 &nbsp; if ((window.event.altKey)&amp;&amp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ((window.event.keyCode==37)||&nbsp;&nbsp; //屏蔽 Alt+ 方向键 ← &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (window.event.keyCode==39))){&nbsp; //屏蔽 Alt+ 方向键 → &nbsp;&nbsp;&nbsp;&nbsp; event.returnValue=false;//防止使用ALT+方向键前进或后退网页 &nbsp; } &nbsp; if ((event.keyCode==8) ||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //屏蔽退格删除键 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (event.keyCode==116)||&nbsp;&nbsp; //屏蔽 F5 刷新键 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (event.keyCode==112)||&nbsp;&nbsp; //屏蔽 F1 刷新键 bitsCN.com中国网管联盟&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (event.ctrlKey &amp;&amp; event.keyCode==82)){ //Ctrl + R &nbsp;&nbsp;&nbsp;&nbsp; event.keyCode=0; &nbsp;&nbsp;&nbsp;&nbsp; event.returnValue=false; &nbsp; } &nbsp; if ((event.ctrlKey)&amp;&amp;(event.keyCode==78))&nbsp;&nbsp; //屏蔽Ctrl+N &nbsp;&nbsp;&nbsp;&nbsp; event.returnValue=false; &nbsp; if ((event.shiftKey)&amp;&amp;(event.keyCode==121)) //屏蔽Shift+F10 &nbsp;&nbsp;&nbsp;&nbsp; event.returnValue=false; &nbsp; if (window.event.srcElement.tagName == "A" &amp;&amp; window.event.shiftKey)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.event.returnValue = false;&nbsp; //屏蔽 shift 加鼠标左键新开一网页 &nbsp; if ((window.event.altKey)&amp;&amp;(window.event.keyCode==115)){ //屏蔽Alt+F4 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.showModelessDialog("about:blank","","dialogWidth:1px;dialogHeight:1px"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;} }</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;button</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;检查按下的鼠标键</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;0 没按键&nbsp; 1 按左键&nbsp; 2 按右键&nbsp; 3 按左右键&nbsp; 4 按中间键&nbsp; 5 按左键和中间键&nbsp; 6 按右键和中间键&nbsp; 7 按所有的键</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;仅用于onmousedown，onmouseup和onmousemove事件。对其他事件，不管鼠标状态如何，都返回0（比如onclick）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;srcElement</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;检测onmouseover和onmouseout事件发生时，鼠标所离开的元素</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;Object</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;toElement</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;检测onmouseover和onmouseout事件发生时，鼠标所进入的元素</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;Object</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;只读</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;type</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;返回事件名</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;返回没有“on”作为前缀的事件名，比如，onclick事件返回的type是click</td> 
 </tr> 
 </tbody> 
</table>