文章詳情頁
JavaScript中常見的事件用法小結(jié)
瀏覽：125日期：2022-06-10 15:15:46
一.onclick() 鼠標左鍵單擊事件
案例：點擊按鈕彈框
<body><input type="button" value="按鈕" id="btn"><script> document.getElementById("btn").onclick = function () {alert("點擊了"); };</script></body> 
二.onmouseover 鼠標進入事件與onmouseout鼠標離開事件
案例：鼠標進入紅色，離開藍色（放上去就可以，不用點擊）
<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 獲取焦點事件與onblur 失去焦點事件
案例：文本框
<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 鼠標移動事件
鼠標移動的時候就會觸發(fā)
案例：div 跟著鼠標移動
<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) {//鼠標相對于頁面的可視區(qū)域的橫坐標var x = e.clientX;//鼠標相對于頁面的可視區(qū)域的縱坐標var y = e.clientY;//div對象var dvobj = document.getElementById("dv");//設(shè)置div的橫坐標dvobj.style.left = x + "px";//設(shè)置div的縱坐標dvobj.style.top = y + "px"; };</script></body>五.onscroll 滾動條滾動事件
當拖動滾動條的時候就會觸發(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 鍵盤按下/抬起事件
當鍵盤按下或者抬起任意按鍵的時候觸發(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 鼠標按下/抬起事件
當鼠標左鍵或右鍵按下或者抬起的時候觸發(fā)
按下或抬起滾動輪也會觸發(fā)，滑動滾動輪不能觸發(fā)
如果鼠標比較高級，有其他按鍵的情況下，按下或抬起也會觸發(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("鼠標按下了"); }; document.getElementById("dv").onmouseup = function () {console.log("鼠標抬起了"); };</script></body>
本篇博客來自于傳智播客視頻教程的總結(jié)以及筆記的整理，僅供學(xué)習(xí)交流，切勿用于商業(yè)用途
到此這篇關(guān)于JavaScript中常見的事件用法小結(jié)的文章就介紹到這了,更多相關(guān)js事件內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標簽：
JavaScript
相關(guān)文章：
1. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程2. 詳解瀏覽器的緩存機制3. Xml簡介_動力節(jié)點Java學(xué)院整理4. python多線程和多進程關(guān)系詳解5. 一款功能強大的markdown編輯器tui.editor使用示例詳解6. Python xlrd/xlwt 創(chuàng)建excel文件及常用操作7. python 寫函數(shù)在一定條件下需要調(diào)用自身時的寫法說明8. 存儲于xml中需要的HTML轉(zhuǎn)義代碼9. Python 實現(xiàn)勞拉游戲的實例代碼（四連環(huán)、重力四子棋）10. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗分享
排行榜
網(wǎng)公網(wǎng)安備