js鼠标按键事件和键盘按键事件用法实例汇总
作者:kp12345
这篇文章主要介绍了js鼠标按键事件和键盘按键事件用法,结合实例形式总结分析了JavaScript针对鼠标与键盘事件的常用操作技巧,需要的朋友可以参考下
本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考,具体如下:
keydown,keyup,keypress:属于你的键盘按键
mousedown,mouseup:属于你的鼠标按键
当按钮被按下时,发生 keydown 事件,
keyup是在用户将按键抬起的时候才会触发的,
完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当用户在这个元素上按下鼠标键的时候,发生mousedown
当用户在这个元素上松开鼠标键的时候,发生mouseup
例子
1. 鼠标的哪个按键被点击
<html> <head> <script type="text/javascript"> function whichButton(event) { if (event.button==2) { alert("你点击了鼠标右键!") } else { alert("你点击了鼠标左键!") } } </script> </head> <body onmousedown="whichButton(event)"> <p>请单击你鼠标的左键或右键试试</p> </body> </html>
2. 当前鼠标的光标坐标是多少
<html> <head> <script type="text/javascript"> function show_coords(event) { x=event.clientX y=event.clientY alert("X 坐标: " + x + ", Y 坐标: " + y) } </script> </head> <body onmousedown="show_coords(event)"> <p>在此文档中按下你鼠标的左键看看!</p> </body> </html>
3. 被按下键的unicode码是多少
<html> <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <p>在此文档中按下你键盘上的某个键看看</p> </body> </html>
4. 当前鼠标的光标相对于屏幕的坐标是多少
<html> <head> <script type="text/javascript"> function coordinates(event) { x=event.screenX y=event.screenY alert("X=" + x + " Y=" + y) } </script> </head> <body onmousedown="coordinates(event)"> <p> 点击你鼠标的左键 </p> </body> </html>
5. 当前鼠标的光标坐标是多少
<html> <head> <script type="text/javascript"> function coordinates(event) { x=event.x y=event.y alert("X=" + x + " Y=" + y) } </script> </head> <body onmousedown="coordinates(event)"> <p> 点击你鼠标的左键 </p> </body> </html>
6. shift键是否按下
<html> <head> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("shit键按下了!") } else { alert("shit键没有按下!") } } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>按下shit键,点击你鼠标的左键</p> </body> </html>
7. 当前被点击的是哪一个元素
<html> <head> <script type="text/javascript"> function whichElement(e) { var targ if (!e) var e = window.event if (e.target) targ = e.target else if (e.srcElement) targ = e.srcElement if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode var tname tname=targ.tagName alert("你点击了 " + tname + "元素") } </script> </head> <body onmousedown="whichElement(event)"> <p>在这里点击看看,这里是p</p> <h3>或者点击这里也可以呀,这里是h3</h3> <p>你想点我吗??</p> <img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"> </body> </html>
PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:
javascript事件与功能说明大全:
http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript窗口操作与技巧汇总》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- js中的鼠标事件有哪些(用法示例学习进阶)
- js常用的键盘事件有哪些(用法示例)_键码keyCode对照表
- JavaScript 键盘事件的处理及属性详解
- javascript 组合按键事件监听实现代码
- js捕捉键盘事件和按键键值的方法
- Atitit.js的键盘按键事件捆绑and事件调度
- JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- js 事件截取enter按键页面提交事件示例代码
- javascript 按键事件(兼容各浏览器)
- js获取键盘按键响应事件(兼容各浏览器)
- JavaScript 监听textarea中按键事件
- JavaScript中常见的事件用法小结