js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法實(shí)例匯總

更新時(shí)間：2016年10月03日 11:02:11 作者：kp12345

這篇文章主要介紹了js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)鼠標(biāo)與鍵盤(pán)事件的常用操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js鼠標(biāo)按鍵事件和鍵盤(pán)按鍵事件用法。分享給大家供大家參考，具體如下：

keydown,keyup，keypress：屬于你的鍵盤(pán)按鍵

mousedown,mouseup：屬于你的鼠標(biāo)按鍵

當(dāng)按鈕被按下時(shí)，發(fā)生 keydown 事件,

keyup是在用戶將按鍵抬起的時(shí)候才會(huì)觸發(fā)的,

完整的 key press 過(guò)程分為兩個(gè)部分：1. 按鍵被按下；2. 按鍵被松開(kāi)。

當(dāng)用戶在這個(gè)元素上按下鼠標(biāo)鍵的時(shí)候，發(fā)生mousedown

當(dāng)用戶在這個(gè)元素上松開(kāi)鼠標(biāo)鍵的時(shí)候，發(fā)生mouseup

例子

1. 鼠標(biāo)的哪個(gè)按鍵被點(diǎn)擊

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你點(diǎn)擊了鼠標(biāo)右鍵!")
}
else
{
alert("你點(diǎn)擊了鼠標(biāo)左鍵!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>請(qǐng)單擊你鼠標(biāo)的左鍵或右鍵試試</p>
</body>
</html>

2. 當(dāng)前鼠標(biāo)的光標(biāo)坐標(biāo)是多少

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐標(biāo)： " + x + ", Y 坐標(biāo)： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文檔中按下你鼠標(biāo)的左鍵看看！</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án)上的某個(gè)鍵看看</p>
</body>
</html>

4. 當(dāng)前鼠標(biāo)的光標(biāo)相對(duì)于屏幕的坐標(biāo)是多少

<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>
點(diǎn)擊你鼠標(biāo)的左鍵
</p>
</body>
</html>

5. 當(dāng)前鼠標(biāo)的光標(biāo)坐標(biāo)是多少

<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>
點(diǎn)擊你鼠標(biāo)的左鍵
</p>
</body>
</html>

6. shift鍵是否按下

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit鍵按下了!")
}
else
{
alert("shit鍵沒(méi)有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit鍵，點(diǎn)擊你鼠標(biāo)的左鍵</p>
</body>
</html>

7. 當(dāng)前被點(diǎn)擊的是哪一個(gè)元素

<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("你點(diǎn)擊了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在這里點(diǎn)擊看看，這里是p</p>
<h3>或者點(diǎn)擊這里也可以呀，這里是h3</h3>
<p>你想點(diǎn)我嗎？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

PS：這里再為大家提供一個(gè)關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說(shuō)明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: