html页面中event的常见应用

公告

View Post

一：获取键盘上某个按键的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 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>

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 onmousedown="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 onmousedown="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 onmousedown="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="${queryName }" style="width: 200px;"></li>
2         <li><input  type="button" class="scbtn" onclick="queryByName();" value="查询"/></li>

View Code

sdfa

posted on 2014-07-30 17:18 无信不立阅读(487) 评论(0) 收藏举报

刷新页面返回顶部