本文汇总了JavaScript中鼠标与键盘按键事件的用法，涵盖keydown、keyup、keypress、mousedown和mouseup。通过具体代码示例，演示如何获取点击的按键类型、光标坐标、按键Unicode码、屏幕坐标及修饰键状态，并介绍如何识别被点击的元素。
JavaScript按键事件概述
本文通过具体实例，详细解析JavaScript中鼠标按键事件与键盘按键事件的应用方法，供读者参考学习。
在键盘交互中，主要涉及keydown、keyup和keypress这三个关键事件。
在鼠标交互中，核心关注的是mousedown和mouseup这两个按键状态变化事件。
当用户按下某个键时，浏览器会触发keydown事件。
当用户松开刚才按下的键时，则会触发keyup事件。
一次完整的按键操作包含两个阶段：首先是按键被按下，随后是按键被松开。
当用户在指定元素上按下鼠标键时，系统将触发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元素
<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>
此外，本站还提供了一款JS事件在线工具，归纳整理了JavaScript常用事件类型及其对应的函数功能。
该工具名为javascript事件与功能说明大全：
访问地址为：http://tools.jb51.net/table/javascript_event
若读者对JavaScript其他领域感兴趣，可进一步查阅本站专题，包括《JavaScript窗口操作与技巧汇总》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述内容能对读者的JavaScript程序设计工作有所帮助。