js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法。分享给大家供大家参考，具体如下：
keydown,keyup，keypress：属于你的键盘按键
mousedown,mouseup：属于你的鼠标按键
当按钮被按下时，发生keydown事件,
keyup是在用户将按键抬起的时候才会触发的,
完整的keypress过程分为两个部分：1.按键被按下；2.按键被松开。
当用户在这个元素上按下鼠标键的时候，发生mousedown
当用户在这个元素上松开鼠标键的时候，发生mouseup
例子
1.鼠标的哪个按键被点击
<html>
<head>
<scripttype="text/javascript">
functionwhichButton(event)
{
if(event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<bodyonmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>
2.当前鼠标的光标坐标是多少
<html>
<head>
<scripttype="text/javascript">
functionshow_coords(event)
{
x=event.clientX
y=event.clientY
alert("X坐标："+x+",Y坐标："+y)
}
</script>
</head>
<bodyonmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看！</p>
</body>
</html>
3.被按下键的unicode码是多少
<html>
<head>
<scripttype="text/javascript">
functionwhichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<bodyonkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>
4.当前鼠标的光标相对于屏幕的坐标是多少
<html>
<head>
<scripttype="text/javascript">
functioncoordinates(event)
{
x=event.screenX
y=event.screenY
alert("X="+x+"Y="+y)
}
</script>
</head>
<bodyonmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>
5.当前鼠标的光标坐标是多少
<html>
<head>
<scripttype="text/javascript">
functioncoordinates(event)
{
x=event.x
y=event.y
alert("X="+x+"Y="+y)
}
</script>
</head>
<bodyonmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>
6.shift键是否按下
<html>
<head>
<scripttype="text/javascript">
functionisKeyPressed(event)
{
if(event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<bodyonmousedown="isKeyPressed(event)">
<p>按下shit键，点击你鼠标的左键</p>
</body>
</html>
7.当前被点击的是哪一个元素
<html>
<head>
<scripttype="text/javascript">
functionwhichElement(e)
{
vartarg
if(!e)vare=window.event
if(e.target)targ=e.target
elseif(e.srcElement)targ=e.srcElement
if(targ.nodeType==3)//defeatSafaribug
targ=targ.parentNode
vartname
tname=targ.tagName
alert("你点击了"+tname+"元素")
}
</script>
</head>
<bodyonmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p>
<h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<imgborder="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程序设计有所帮助。