|
viceen 于 2022-07-06 09:28:59 發(fā)布 756 收藏 3 分類專欄： html和css 文章標(biāo)簽： html javascript 前端 版權(quán) html和css 專欄收錄該內(nèi)容 5 篇文章0 訂閱 訂閱專欄 HTML中的DOM事件——鼠標(biāo)事件、鍵盤事件、框架/對(duì)象事件、表單事件 1. 什么是事件 是通過用戶進(jìn)行觸發(fā)的一些行為。比如：點(diǎn)擊、雙擊、鍵盤按下抬起等等都稱為事件。 事件在觸發(fā)的時(shí)候會(huì)產(chǎn)生一個(gè)事件對(duì)象。 2.事件的添加方式 在標(biāo)簽內(nèi)添加事件名稱，并調(diào)用對(duì)應(yīng)的事件處理函數(shù) <body> <button id="box" onclick="a()">按鈕</button> </body> <script> function a() { console.log("點(diǎn)擊了"); } </script> 通過獲取 DOM 對(duì)象，然后添加事件，并賦值的事件的處理函數(shù)。 <body> <button id="box">按鈕</button> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); // 給元素添加事件 box.onclick = function (event) { console.log("點(diǎn)擊了"); console.log(event); }; </script> 通過監(jiān)聽的方式添加事件。 <body> <button id="btn">按鈕</button> </body> <script> var btn = document.getElementById("btn"); // 通過添加事件的監(jiān)聽 // 第一個(gè)參數(shù)是事件的類型 // 第二個(gè)參數(shù)是事件的處理函數(shù) btn.addEventListener("click", function (event) { console.log("點(diǎn)擊了"); console.log(event); }); </script> 3. 鼠標(biāo)事件 3.1 單機(jī)事件 onclick 3.2 雙擊事件 ondblclick <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.ondblclick = function () { console.log("雙擊了"); }; </script> 3.3 鼠標(biāo)按下事件 onmousedown 鼠標(biāo)在某一個(gè)元素中進(jìn)行按下操作時(shí)會(huì)觸發(fā) <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmousedown = function () { console.log("鼠標(biāo)按下"); }; </script> 3.4 鼠標(biāo)抬起事件 onmouseup <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmouseup = function () { console.log("鼠標(biāo)抬起"); }; </script> 3.5 鼠標(biāo)進(jìn)入事件 onmouseenter <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmouseenter = function () { console.log("鼠標(biāo)進(jìn)入"); }; </script> 3.6 鼠標(biāo)離開事件 onmouseleave <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmouseleave = function () { console.log("鼠標(biāo)離開"); }; </script> 3.7 鼠標(biāo)移動(dòng)事件 onmousemove <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmousemove = function () { console.log("鼠標(biāo)移動(dòng)"); }; </script> 3.8 鼠標(biāo)移入 onmouseover <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmouseover = function () { console.log("鼠標(biāo)移入"); }; </script> 3.9 鼠標(biāo)移除 onmouseout <head> <style> #box { width: 200px; height: 200px; background: palegreen; } </style> </head> <body> <div id="box"></div> </body> <script> // 獲取DOM對(duì)象 var box = document.getElementById("box"); box.onmouseout = function () { console.log("鼠標(biāo)移出"); }; </script> 4. 鍵盤事件 4.1 某個(gè)鍵盤按鍵被按下：onkeydown <script> document.body.onkeydown = function (event) { console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼 console.log("鍵盤按下"); }; </script> 4.2 某個(gè)鍵盤按鍵被松開：onkeyup <script> document.body.onkeyup = function (event) { console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼 console.log("鍵盤抬起"); }; </script> 4.3 某個(gè)鍵盤按鍵被按下并松開：onkeypress <script> document.body.onkeypress = function (event) { console.log(event.keyCode); // 獲取鍵盤按鍵的鍵碼 console.log("鍵盤按下并抬起"); }; </script> 5. 框架/對(duì)象(Frame/Object) 事件 5.1 一張頁面或一幅圖像完成加載：onload <head> <script> // 頁面加載事件 這個(gè)事件通過情況下綁定在 window window.onload = function () { foo(); var box = document.getElementById("box"); console.log(box); }; function foo() { console.log("foo"); } </script> </head> <body> <div id="box"></div> </body> 5.2 當(dāng)文檔被滾動(dòng)時(shí)發(fā)生的事件：onscroll <head> <style> #box { height: 3000px; } </style> </head> <body> <div id="box"></div> </body> <script> window.document.onscroll = function () { console.log("滾動(dòng)事件觸發(fā)了"); // 獲取文檔滾動(dòng)的高度 var top = document.documentElement.scrollTop; console.log(top); }; </script> 5.3 窗口或框架被重新調(diào)整大小：onscroll <script> window.onresize = function () { console.log("窗口大小變化了"); }; </script> 6. 表單事件 6.1 元素失去焦點(diǎn)時(shí)觸發(fā)：onblur <body> <form action="" method="get"> <p> 用戶名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onblur = function () { console.log("失焦了"); }; </script> 6.2 該事件在表單元素改變時(shí)觸發(fā)：onchange <body> <form action="" method="get"> <p> 用戶名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onchange = function () { // 當(dāng)你失焦了才能觸發(fā) 或者 回車 console.log("輸入了"); }; </script> 6.3 元素獲取焦點(diǎn)時(shí)觸發(fā)：onfocus <body> <form action="" method="get"> <p> 用戶名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.onfocus = function () { console.log("獲取焦點(diǎn)"); }; </script> 6.4 元素獲取用戶輸入時(shí)觸發(fā)：oninput <body> <form action="" method="get"> <p> 用戶名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> var username = document.getElementById("username"); username.oninput = function () { // 當(dāng)每輸入一個(gè)值的時(shí)候就觸發(fā) console.log("oninput事件觸發(fā)了"); }; </script> 6.5 表單提交時(shí)觸發(fā)：onsubmit <body> <form id="form" action="" method="get" onsubmit="login()"> 用戶名： <input type="text" id="username" /> </p> <input type="submit" value="提交" /> </form> </body> <script> // 表單的處理函數(shù) function login() { alert("表單已經(jīng)提交了"); } var form = document.getElementById("form"); form.onsubmit = function () { alert("登陸"); // 組織表單的默認(rèn)行為 阻止一直刷新 // event.preventDefault(); return false }; </script> ———————————————— 版權(quán)聲明：本文為CSDN博主「viceen」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/weixin_44867717/article/details/125632882 |
|
|
