html页面中event的常见应用
一:获取键盘上某个按键的unicode值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function whichButton(event) 5 { 6 alert(event.keyCode) 7 } 8 9 </script> 10 </head> 11 12 <body onkeyup="whichButton(event)"> 13 <p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p> 14 <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p> 15 </body> 16 17 </html>
二:请在页面内点击鼠标的按键。判断你点击的是哪个键
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function whichButton(event) 5 { 6 var btnNum = event.button; 7 if (btnNum==2) 8 { 9 alert("您点击了鼠标右键!") 10 } 11 else if(btnNum==0) 12 { 13 alert("您点击了鼠标左键!") 14 } 15 else if(btnNum==1) 16 { 17 alert("您点击了鼠标中键!"); 18 } 19 else 20 { 21 alert("您点击了" + btnNum+ "号键,我不能确定它的名称。"); 22 } 23 } 24 </script> 25 </head> 26 27 <body onmousedown="whichButton(event)"> 28 <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p> 29 </body> 30 31 </html>
三:获取光标的坐标(相对于当前文档)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function show_coords(event) 5 { 6 x=event.clientX 7 y=event.clientY 8 alert("X 坐标: " + x + ", Y 坐标: " + y) 9 } 10 </script> 11 </head> 12 13 <body onmousedown="show_coords(event)"> 14 15 <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p> 16 17 </body> 18 </html>
四:相对于屏幕光标的坐标
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 4 <script type="text/javascript"> 5 function coordinates(event) 6 { 7 x=event.screenX 8 y=event.screenY 9 alert("X=" + x + " Y=" + y) 10 } 11 12 </script> 13 </head> 14 <body onmousedown="coordinates(event)"> 15 16 <p> 17 在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。 18 </p> 19 20 </body> 21 </html>
五:获取事件触发的类型
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function getEventType(event) 5 { 6 alert(event.type); 7 } 8 </script> 9 </head> 10 11 <body onmousedown="getEventType(event)"> 12 13 <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p> 14 15 </body> 16 </html>
六:当输入完搜索条件,直接点击回车键触发搜索的js方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <li>用户名:<input type="text" class="dfinput" id="queryName" onkeyup="if(event.keyCode==13) queryByName();" value="${queryName }" style="width: 200px;"></li> 2 <li><input type="button" class="scbtn" onclick="queryByName();" value="查询"/></li>
sdfa