js鼠标按键事件和键盘按键事件用法实例汇总
更新时间：2016年10月03日 11:02:11 作者：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中常见的事件用法小结
相关文章
JavaScript作为一种弱类型语言，它的隐式转换是非常灵活有趣的。当我们没有深入了解隐式转换的时候可能会对一些运算的结果会感动困惑，比如4 + true = 5。当然，如果对隐式转换了解足够深刻，能够提高对js的使用能力。这里分享一下，函数在隐式转换中的一些规则2021-06-06
点击单元格后可编辑单元格内文本如何制作...2006-10-10
label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值，下面有个不错的示例，希望大家可以学习下2014-01-01
这篇文章主要介绍了JS简单实现DIV相对于浏览器固定位置不变的方法,涉及javascript针对页面位置的运算与动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了javascript实现单击和双击并存的方法,可通过定义二次点击的间隔时间来达到判断单击与双击的效果,是非常实用的技巧,需要的朋友可以参考下2014-12-12
本文介绍的方法基于javascript，css和myFunction结合可实现页面展示转换，下面有个示例，大家可以参考下2014-07-07
javascript 动态修改css样式方法汇总(四种方法)
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧2015-08-08
这篇文章主要介绍了JavaScript中的冒泡排序法的知识，并通过一个例子给大家讲解了js冒泡排序，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-08-08
下面小编就为大家带来一篇浅谈js for循环输出i为同一值的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章给大家分享了JavaScript实现仿Clock ISO时钟的方法以及实例代码，有兴趣的朋友参考学习下下。2018-06-06
最新评论