文章詳情頁
JavaScript中常見的事件用法小結(jié)
瀏覽：114日期：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)離開事件
案例：鼠標(biāo)進(jìn)入紅色，離開藍(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="請輸入內(nèi)容" id="te"><script> document.getElementById("te").onfocus = function () {document.getElementById("te").value = ""; }; document.getElementById("te").onblur = function () {document.getElementById("te").value = "請輸入內(nèi)容"; };</script></body>
四.onmousemove 鼠標(biāo)移動事件
鼠標(biāo)移動的時候就會觸發(fā)
案例：div 跟著鼠標(biāo)移動
<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)相對于頁面的可視區(qū)域的橫坐標(biāo)var x = e.clientX;//鼠標(biāo)相對于頁面的可視區(qū)域的縱坐標(biāo)var y = e.clientY;//div對象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)拖動滾動條的時候就會觸發(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("滾動條被拖動了"); };</script></body> 
六. onkeydown / onkeyup 鍵盤按下/抬起事件
當(dāng)鍵盤按下或者抬起任意按鍵的時候觸發(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 獲取按下的是哪個按鍵
<script> //頁面的任何的位置.按下鍵盤,獲取按鍵的值 document.onkeydown = function (e) {//console.log(e.keyCode);//事件參數(shù)對象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)左鍵或右鍵按下或者抬起的時候觸發(fā)
按下或抬起滾動輪也會觸發(fā)，滑動滾動輪不能觸發(fā)
如果鼠標(biāo)比較高級，有其他按鍵的情況下，按下或抬起也會觸發(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>
本篇博客來自于傳智播客視頻教程的總結(jié)以及筆記的整理，僅供學(xué)習(xí)交流，切勿用于商業(yè)用途
到此這篇關(guān)于JavaScript中常見的事件用法小結(jié)的文章就介紹到這了,更多相關(guān)js事件內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標(biāo)簽：
JavaScript
相關(guān)文章：
1. ajax請求添加自定義header參數(shù)代碼2. 解決android studio引用遠(yuǎn)程倉庫下載慢(JCenter下載慢)3. 基于javascript處理二進(jìn)制圖片流過程詳解4. ASP基礎(chǔ)知識VBScript基本元素講解5. Gitlab CI-CD自動化部署SpringBoot項(xiàng)目的方法步驟6. idea刪除項(xiàng)目的操作方法7. Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動庫8. asp知識整理筆記4（問答模式）9. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法10. axios和ajax的區(qū)別點(diǎn)總結(jié)
排行榜
網(wǎng)公網(wǎng)安備