js鼠標按鍵事件和鍵盤按鍵事件用法實例匯總
本文實例講述了js鼠標按鍵事件和鍵盤按鍵事件用法。分享給大家供大家參考,具體如下:
keydown,keyup,keypress:屬于你的鍵盤按鍵
mousedown,mouseup:屬于你的鼠標按鍵
當按鈕被按下時,發(fā)生 keydown 事件,
keyup是在用戶將按鍵抬起的時候才會觸發(fā)的,
完整的 key press 過程分為兩個部分:1. 按鍵被按下;2. 按鍵被松開。
當用戶在這個元素上按下鼠標鍵的時候,發(fā)生mousedown
當用戶在這個元素上松開鼠標鍵的時候,發(fā)生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:這里再為大家提供一個關(guān)于JS事件的在線工具,歸納總結(jié)了JS常用的事件類型與函數(shù)功能:
javascript事件與功能說明大全:
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- js中的鼠標事件有哪些(用法示例學習進階)
- js常用的鍵盤事件有哪些(用法示例)_鍵碼keyCode對照表
- JavaScript?鍵盤事件的處理及屬性詳解
- javascript 組合按鍵事件監(jiān)聽實現(xiàn)代碼
- js捕捉鍵盤事件和按鍵鍵值的方法
- Atitit.js的鍵盤按鍵事件捆綁and事件調(diào)度
- JavaScript onkeypress事件入門實例(按下或按住一個鍵盤按鍵)
- JavaScript onkeydown事件入門實例(鍵盤某個按鍵被按下)
- js 事件截取enter按鍵頁面提交事件示例代碼
- javascript 按鍵事件(兼容各瀏覽器)
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- JavaScript 監(jiān)聽textarea中按鍵事件
- JavaScript中常見的事件用法小結(jié)
相關(guān)文章
layer插件實現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法
今天小編就為大家分享一篇layer插件實現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js實現(xiàn)頁面打印功能實例代碼(附去頁眉頁腳功能代碼)
js實現(xiàn)頁面打印功能實例代碼(附去頁眉頁腳功能代碼)2009-12-12