文章詳情頁
JavaScript中常見的事件用法小結
瀏覽：127日期：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="請輸入內容" id="te"><script> document.getElementById("te").onfocus = function () {document.getElementById("te").value = ""; }; document.getElementById("te").onblur = function () {document.getElementById("te").value = "請輸入內容"; };</script></body>
四.onmousemove 鼠標移動事件
鼠標移動的時候就會觸發
案例：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) {//鼠標相對于頁面的可視區域的橫坐標var x = e.clientX;//鼠標相對于頁面的可視區域的縱坐標var y = e.clientY;//div對象var dvobj = document.getElementById("dv");//設置div的橫坐標dvobj.style.left = x + "px";//設置div的縱坐標dvobj.style.top = y + "px"; };</script></body>五.onscroll 滾動條滾動事件
當拖動滾動條的時候就會觸發
<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 鍵盤按下/抬起事件
當鍵盤按下或者抬起任意按鍵的時候觸發
<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);//事件參數對象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 鼠標按下/抬起事件
當鼠標左鍵或右鍵按下或者抬起的時候觸發
按下或抬起滾動輪也會觸發，滑動滾動輪不能觸發
如果鼠標比較高級，有其他按鍵的情況下，按下或抬起也會觸發
<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>
本篇博客來自于傳智播客視頻教程的總結以及筆記的整理，僅供學習交流，切勿用于商業用途
到此這篇關于JavaScript中常見的事件用法小結的文章就介紹到這了,更多相關js事件內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
標簽：
JavaScript
相關文章：
排行榜
網公網安備