JavaScript中DOM操作常用事件總結(jié)
更新時(shí)間：2022年04月18日 15:22:53 作者：小豬弟
這篇文章主要為大家詳細(xì)介紹了JavaScript中常用的幾個(gè)DOM事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
上一篇聊了如何同JavaScript獲得頁(yè)面元素，而獲得頁(yè)面元素的的目的就是操作這個(gè)元素的一行為，而這個(gè)行為是通過(guò)某個(gè)條件進(jìn)行觸發(fā)的。而這個(gè)一系列在JavaScript中稱(chēng)之為事件。
由此可以看出事件分三個(gè)部分：
事件源頭： 也就是要操作的元素是誰(shuí)。
事件類(lèi)型： 也就是事件觸發(fā)條件，比如鼠標(biāo)點(diǎn)擊以及鼠標(biāo)滑過(guò)等。
事件處理： 如果觸發(fā)了這個(gè)行為，如何操作，以及操作結(jié)果。
常用事件
現(xiàn)在說(shuō)一下常用的事件，這個(gè)不是全部的事件，如果需要了解全部的事件可以看官方文檔。
常用的事件有：
| 事件類(lèi)型 | 描述 |
|---|---|
| onblur | 對(duì)象失去焦點(diǎn)的時(shí)候觸發(fā) |
| onfous | 當(dāng)獲得焦點(diǎn)的時(shí)候觸發(fā) |
| onclick | 用戶(hù)鼠標(biāo)左鍵點(diǎn)擊的時(shí)候觸發(fā) |
| ondblclick | 用戶(hù)雙擊時(shí)候觸發(fā) |
| onchange | 當(dāng)對(duì)象或者選中區(qū)內(nèi)容改變的時(shí)候觸發(fā) |
| onkeyup | 當(dāng)用戶(hù)釋放鍵盤(pán)按鍵時(shí)候觸發(fā)（還有兩個(gè)事件onkeydown和onkeypress） |
| onload | 瀏覽器加載完畢后立即觸發(fā) |
| onmouseout | 當(dāng)用戶(hù)將鼠標(biāo)移出對(duì)象范圍時(shí)觸發(fā) |
| onmouseover | 當(dāng)用戶(hù)數(shù)鼠標(biāo)在對(duì)象上滑動(dòng)的時(shí)候觸發(fā) |
| onselect | 當(dāng)當(dāng)前選擇區(qū)改變時(shí)觸發(fā) |
| onunload | 對(duì)象卸載前理解觸發(fā) |
下面演示的時(shí)候會(huì)有些涉及到涉及到一些屬性的變化，可以先不關(guān)心而是關(guān)系這個(gè)事件是如何觸發(fā)發(fā)。后面單獨(dú)為再寫(xiě)一篇關(guān)于屬性的修改以及賦值。
演示得到焦點(diǎn)和失去焦點(diǎn)
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
</head>
<body>
<!--可以在標(biāo)簽上直接綁定事件類(lèi)型-->
<label>姓名</label> <input id="testid" type="text" onfocus="test_foncus()" value="請(qǐng)輸入">
<script>
var element=document.getElementById("testid");
function test_foncus() {
if (element.value=="請(qǐng)輸入"){
element.value="";
}
}
// 也可以主頁(yè)綁定事件類(lèi)型
element.onblur=function () {
console.log(element.value);
if (element.value==""){
element.value="請(qǐng)輸入";
}
}
</script>
</body>
</html>
演示 鼠標(biāo)劃過(guò)和離開(kāi)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="testid" ></div>
<script>
var element=document.getElementById("testid");
element.onmouseover=function () {
element.style='background-color:pink;';
}
element.onmouseout=function () {
element.style='background-color:blue;';
}
</script>
</body>
</html>
點(diǎn)擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
</style>
</head>
<body>
<button id="testid">點(diǎn)擊按鈕</button>
<script>
var element=document.getElementById("testid");
element.onclick=function () {
confirm("你確定你要點(diǎn)擊？")
}
</script>
</body>
</html>
load加載頁(yè)面事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
</style>
</head>
<body>
<div id="testid1"></div>
<hr>
<div id="testid2"></div>
<script>
var element1=document.getElementById("testid1");
var element2=document.getElementById("testid2");
// 一般onload加載是監(jiān)控的是這個(gè)頁(yè)面的加載所以一般都是window調(diào)用
window.onload=function () {
element1.innerText="innerText插入";
element2.innerHTML="<h1>innerHTML插入</h1>"
}
</script>
</body>
</html>
補(bǔ)充 innerText和innerHTML區(qū)別
- innerText 在頁(yè)面上輸出文本內(nèi)容，直接將標(biāo)簽刪除
- innerHTML在頁(yè)面上輸出標(biāo)簽效果以及其內(nèi)容。
onkeyup 鍵盤(pán)彈起事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
element.onkeyup=function () {
alert("你在輸入內(nèi)容啊")
}
</script>
</body>
</html>
內(nèi)容變化事件
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
// 到鼠標(biāo)離開(kāi)的時(shí)候就會(huì)變得是否內(nèi)容修改
element.onchange=function () {
alert("你在修改嗎？")
}
</script>
</body>
</html>
選中時(shí)觸發(fā)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試文檔</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text" value="點(diǎn)擊兩次選選擇">
<script>
var element=document.getElementById("testid");
element.onselect=function () {
alert(element.value);
}
</script>
</body>
</html>
到此這篇關(guān)于JavaScript中DOM操作常用事件總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript DOM事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript DOMContentLoaded事件案例詳解
- JavaScript WebAPI、DOM、事件和操作元素實(shí)例詳解
- 詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
- JS前端知識(shí)點(diǎn)總結(jié)之頁(yè)面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
- JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
- js中DOM事件綁定分析
- JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開(kāi)發(fā)基礎(chǔ)小結(jié)
- js學(xué)習(xí)總結(jié)之dom2級(jí)事件基礎(chǔ)知識(shí)詳解
- JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
- JavaScript DOM操作與事件處理方法
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
在JavaScript里嵌入大量字符串常量的實(shí)現(xiàn)方法
在JavaScript文件里嵌入大量字符串常量是經(jīng)常遇到的事。有時(shí)為了省事，就把一些界面的HTML和CSS直接寫(xiě)在JS文件里
2013-07-07 
JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解
這篇文章主要為大家介紹了JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11 
js?剪切、復(fù)制、粘貼功能實(shí)現(xiàn)
Navigator.clipboard?API可以用來(lái)訪問(wèn)系統(tǒng)剪貼板，可以實(shí)現(xiàn)【剪切、復(fù)制、粘貼】功能。該?API?被設(shè)計(jì)用來(lái)取代使用?document.execCommand()?的剪貼板訪問(wèn)方式，不兼容?IE
2023-05-05 
Javascript 判斷函數(shù)類(lèi)型完美解決方案
在判斷函數(shù)類(lèi)型時(shí)，我們通常使用typeof方法，一般情況下，它會(huì)得到我們所預(yù)想的效果。
2009-09-09 
原生JavaScript+LESS實(shí)現(xiàn)瀑布流
這篇文章主要介紹了原生JavaScript+LESS實(shí)現(xiàn)瀑布流的方法，附上了具體實(shí)例，這里推薦給有需要的小伙伴。
2014-12-12 
淺析對(duì)JS中方法unshift和push方法的理解
JavaScript中的`unshift`和`push`方法用于在數(shù)組的開(kāi)始和結(jié)尾添加元素,它們會(huì)直接修改原數(shù)組并返回新的數(shù)組長(zhǎng)度,本文介紹JS中方法unshift和push方法的相關(guān)知識(shí),感興趣的朋友一起看看吧
2024-12-12 
這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門(mén)語(yǔ)言最基本的概念，初學(xué)者都會(huì)很快掌握。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12 
addEventListener()與removeEventListener()解析
這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener()，用于處理指定和刪除事件處理程序操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04