这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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 事件与功能说明大全:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0708/331448.html