zoukankan      html  css  js  c++  java
  • html页面中event的常见应用

    一:获取键盘上某个按键的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=" 200px;"></li>
    2         <li><input  type="button" class="scbtn" onclick="queryByName();" value="查询"/></li>
    View Code

    sdfa

  • 相关阅读:
    输入流输出流打印到文件
    前缀和
    树形dp
    快速幂 ,快速幂优化,矩形快速幂(java)
    尾递归
    java中bigInteger的应用
    求树的最大直径
    买不到的数目
    ccpc 长春站 G
    大学ACM第二周心得
  • 原文地址:https://www.cnblogs.com/shangxiaofei/p/3878555.html
Copyright © 2011-2022 走看看