文章詳情頁(yè)
JavaScript中常見的事件用法小結(jié)
瀏覽：171日期：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="請(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é)的文章就介紹到這了,更多相關(guān)js事件內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標(biāo)簽：
JavaScript
相關(guān)文章：
1. Ajax對(duì)xml信息的接收和處理操作實(shí)例分析2. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐3. Ajax返回值類型與用法實(shí)例分析4. XML入門精解之結(jié)構(gòu)與語(yǔ)法5. python shutil操作文件實(shí)例講解6. 解決Python運(yùn)算符重載的問題7. el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)8. uniapp 手機(jī)驗(yàn)證碼輸入框?qū)崿F(xiàn)代碼(隨機(jī)數(shù)、倒計(jì)時(shí)、隱藏手機(jī)號(hào)碼中間四位)可以直接使用9. PHP開發(fā)技巧之PHAR反序列化詳解10. Rollup 簡(jiǎn)易入門示例教程
排行榜
網(wǎng)公網(wǎng)安備