首页 > 代码库 > html页面中event的常见应用

html页面中event的常见应用

2024-07-14 21:48:32   224人阅读

一：获取键盘上某个按键的unicode值

 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>
View Code

二：请在页面内点击鼠标的按键。判断你点击的是哪个键

 

 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 else20   {21   alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");22   }23 }24 </script>25 </head>26 27 <body onm ousedown="whichButton(event)">28 <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>29 </body>30 31 </html>
View Code

 

三：获取光标的坐标（相对于当前文档）

 

 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 onm ousedown="show_coords(event)">14 15 <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>16 17 </body>18 </html>
View Code

 

四：相对于屏幕光标的坐标

 

 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 onm ousedown="coordinates(event)">15 16 <p>17 在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。18 </p>19 20 </body>21 </html>
View Code

 

五：获取事件触发的类型

 

 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 onm ousedown="getEventType(event)">12 13 <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>14 15 </body>16 </html>
View Code

 

六：当输入完搜索条件，直接点击回车键触发搜索的js方法

 

1 <li>用户名：<input type="text" class="dfinput" id="queryName" onkeyup="if(event.keyCode==13) queryByName();"  value="http://www.mamicode.com/${queryName }" style="width: 200px;"></li>2         <li><input  type="button" class="scbtn" onclick="queryByName();" value="http://www.mamicode.com/查询"/></li>
View Code

 

sdfa

 


联系
我们