文章詳情頁(yè)
JavaScript中常見(jiàn)的事件用法小結(jié)
瀏覽：227日期：2022-06-10 15:15:46
一.onclick() 鼠標(biāo)左鍵單擊事件
案例：點(diǎn)擊按鈕彈框
<body><input type="button" value="按鈕" id="btn"><script> document.getElementById("btn").onclick = function () {alert("點(diǎn)擊了"); };</script></body> 
二.onmouseover 鼠標(biāo)進(jìn)入事件與onmouseout鼠標(biāo)離開(kāi)事件
案例：鼠標(biāo)進(jìn)入紅色，離開(kāi)藍(lán)色（放上去就可以，不用點(diǎn)擊）
<head> <meta charset="UTF-8"> <title>Title</title> <style>div { width: 200px; height: 200px; background-color: aqua;} </style></head><body><div id="dv"></div><script> document.getElementById("dv").onmouseover = function () {document.getElementById("dv").style.backgroundColor = "red"; }; document.getElementById("dv").onmouseout = function () {document.getElementById("dv").style.backgroundColor = ""; };</script></body>
三.onfocus 獲取焦點(diǎn)事件與onblur 失去焦點(diǎn)事件
案例：文本框
<body><input type="text" value="請(qǐng)輸入內(nèi)容" id="te"><script> document.getElementById("te").onfocus = function () {document.getElementById("te").value = ""; }; document.getElementById("te").onblur = function () {document.getElementById("te").value = "請(qǐng)輸入內(nèi)容"; };</script></body>
四.onmousemove 鼠標(biāo)移動(dòng)事件
鼠標(biāo)移動(dòng)的時(shí)候就會(huì)觸發(fā)
案例：div 跟著鼠標(biāo)移動(dòng)
<head> <meta charset="UTF-8"> <title>Title</title> <style>div { width: 50px; height: 50px; background-color: pink; position: absolute;} </style></head><body><div id="dv"></div><script> document.onmousemove = function (e) {//鼠標(biāo)相對(duì)于頁(yè)面的可視區(qū)域的橫坐標(biāo)var x = e.clientX;//鼠標(biāo)相對(duì)于頁(yè)面的可視區(qū)域的縱坐標(biāo)var y = e.clientY;//div對(duì)象var dvobj = document.getElementById("dv");//設(shè)置div的橫坐標(biāo)dvobj.style.left = x + "px";//設(shè)置div的縱坐標(biāo)dvobj.style.top = y + "px"; };</script></body>五.onscroll 滾動(dòng)條滾動(dòng)事件
當(dāng)拖動(dòng)滾動(dòng)條的時(shí)候就會(huì)觸發(fā)
<head> <meta charset="UTF-8"> <title>Title</title> <style>div { width: 100px; height: 100px; background-color: pink; overflow: auto;} </style></head><body><div id="dv"> 碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙</div><script> document.getElementById("dv").onscroll = function () {console.log("滾動(dòng)條被拖動(dòng)了"); };</script></body> 
六. onkeydown / onkeyup 鍵盤按下/抬起事件
當(dāng)鍵盤按下或者抬起任意按鍵的時(shí)候觸發(fā)
<body><input type="text" id="txt"><script> document.getElementById("txt").onkeydown = function () {console.log("鍵盤按下了"); }; document.getElementById("txt").onkeyup = function () {console.log("鍵盤抬起了"); };</script></body>
七.keyCode 獲取按下的是哪個(gè)按鍵
<script> //頁(yè)面的任何的位置.按下鍵盤,獲取按鍵的值 document.onkeydown = function (e) {//console.log(e.keyCode);//事件參數(shù)對(duì)象switch (e.keyCode) { case 81:console.log("您按下的是Q");break; case 87:console.log("您按下的是W");break; case 69:console.log("您按下的是E");break; case 82:console.log("您按下的是R");break;} };</script>八. onmousedown / onmouseup 鼠標(biāo)按下/抬起事件
當(dāng)鼠標(biāo)左鍵或右鍵按下或者抬起的時(shí)候觸發(fā)
按下或抬起滾動(dòng)輪也會(huì)觸發(fā)，滑動(dòng)滾動(dòng)輪不能觸發(fā)
如果鼠標(biāo)比較高級(jí)，有其他按鍵的情況下，按下或抬起也會(huì)觸發(fā)
<head> <meta charset="UTF-8"> <title>Title</title> <style>div { width: 50px; height: 50px; background-color: pink;} </style></head><body><div id="dv"></div><script> document.getElementById("dv").onmousedown = function () {console.log("鼠標(biāo)按下了"); }; document.getElementById("dv").onmouseup = function () {console.log("鼠標(biāo)抬起了"); };</script></body>
本篇博客來(lái)自于傳智播客視頻教程的總結(jié)以及筆記的整理，僅供學(xué)習(xí)交流，切勿用于商業(yè)用途
到此這篇關(guān)于JavaScript中常見(jiàn)的事件用法小結(jié)的文章就介紹到這了,更多相關(guān)js事件內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標(biāo)簽：
JavaScript
相關(guān)文章：
1. 使用Python webdriver圖書館搶座自動(dòng)預(yù)約的正確方法2. ASP基礎(chǔ)知識(shí)VBScript基本元素講解3. 在線php代碼縮進(jìn)、代碼美化工具：PHP Formatter4. Linux刪除系統(tǒng)自帶版本Python過(guò)程詳解5. Android 簡(jiǎn)單的實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能6. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論7. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條8. PHP如何開(kāi)啟Opcache功能提升程序處理效率9. Python 合并拼接字符串的方法10. Python3 json模塊之編碼解碼方法講解
排行榜
網(wǎng)公網(wǎng)安備