本文實例講述了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程序設計有所幫助。