js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了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程序设计有所帮助。
相关推荐
-
JavaScript获取键盘按键的键码(参照表)
简介: JS获取键盘按键的键码event.keyCode,记录-方便查找. 1.键盘各按键对应的数字 2.键盘码使用 2.1.原生js使用 JavaScript document.onkeyup = function (event) { var e = event ? event : window.event; if (e.keyCode == 13) { //旧版火狐.Opera请使用e.which alert('您按了回车键.'); } }; 2.2.jQuery使用 JavaScript
-
js获取及判断键盘按键的方法
本文实例讲述了js获取及判断键盘按键的方法.分享给大家供大家参考,具体如下: js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下: keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter keyCode 16 = Shift_L keyCode 17 = Control_L keyCode 18 = Alt_L keyCode 19 = Pause keyC
-
JS实现自定义简单网页软键盘效果代码
本文实例讲述了JS实现自定义简单网页软键盘效果.分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
js捕捉键盘事件和按键键值的方法
如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
js和jquery实现监听键盘事件示例代码
项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
-
js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当用户在这个元素上按下鼠标键的时候,发生mousedown 当用户在这个元素上松开鼠标键的时候,发生mouseup 例子
-
jQuery事件用法实例汇总
本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值.分享给大家供大家参考之用.具体用法如下: 1.通过方法名给元素绑定事件: $('li').click(function(event){}) 2.通过bind方法给元素绑定事件: $('li') .bind('click',function(event){}) .bind('click',function(event){}) 可见,通过bind,可以给元素绑定多个事件. 3.事件的命名空间 为什么需要事件命名空
-
Node.js API详解之 repl模块用法实例分析
本文实例讲述了Node.js API详解之 repl模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 repl repl(交互式解释器) 模块提供了一种"读取-求值-输出"循环(REPL)的实现,它可作为一个独立的程序或嵌入到其他应用中. 可以通过以下方式使用它: const repl = require('repl'); Node.js 自身也使用 repl 模块为执行 JavaScript 代码提供交互接口. 可以通过不带任何参数(或使用 -i 参数)地执行
-
Node.js API详解之 timer模块用法实例分析
本文实例讲述了Node.js API详解之 timer模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 timer timer 模块暴露了一个全局的 API,用于在某个未来时间段调用调度函数. 因为定时器函数是全局的,所以使用该 API 无需调用 require('timers'). Node.js 中的计时器函数实现了与 Web 浏览器提供的定时器类似的 API, 它使用了一个不同的内部实现,它是基于 Node.js 事件循环构建的. setImmediate(call
-
Node.js API详解之 dgram模块用法实例分析
本文实例讲述了Node.js API详解之 dgram模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dgram dgram模块提供了 UDP 数据包 socket 的实现. 使用以下方式引用: const dgram = require('dgram'); dgram.createSocket(options[, callback]) 说明: 创建一个 dgram.Socket 对象. 一旦创建了套接字,调用 socket.bind() 会指示套接字开始监听数据报消息
-
Node.js API详解之 Error模块用法实例分析
本文实例讲述了Node.js API详解之 Error模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 Error Node.js 中运行的应用程序一般会遇到以下四类错误: 1.标准的 JavaScript 错误: EvalError : 当调用 eval() 失败时抛出. SyntaxError : 当 JavaScript 语法错误时抛出. RangeError : 当值不在预期范围内时抛出. ReferenceError : 当使用未定义的变量时抛出. TypeEr
-
js的window.showModalDialog及window.open用法实例分析
本文实例讲述了js的window.showModalDialog及window.open用法.分享给大家供大家参考.具体分析如下: 一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三.示例: <SCRIPT>
-
JS中超越现实的匿名函数用法实例分析
本文实例讲述了JS中超越现实的匿名函数用法.分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan } show1("zhangsan"); 匿名函数: var show2 = function (name) { alert(name); //打印:张三 } show2("张三"); 上面2种定义函数的区别: 1.我们知道所有的function都会在window对象里 funct
-
JS原型和原型链原理与用法实例详解
本文实例讲述了JS原型和原型链原理与用法.分享给大家供大家参考,具体如下: Javascript语言的继承机制一直很难被人理解. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. Brendan Eich设计javascript之初是为了实现网页与浏览器之间交互的一种简单的脚本语言