快捷導(dǎo)航

JavaScript中DOM操作常用事件總結(jié)

更新時(shí)間：2022年04月18日 15:22:53 作者：小豬弟

這篇文章主要為大家詳細(xì)介紹了JavaScript中常用的幾個(gè)DOM事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

常用事件

現(xiàn)在說一下常用的事件，這個(gè)不是全部的事件，如果需要了解全部的事件可以看官方文檔。

常用的事件有：

事件類型	描述
onblur	對(duì)象失去焦點(diǎn)的時(shí)候觸發(fā)
onfous	當(dāng)獲得焦點(diǎn)的時(shí)候觸發(fā)
onclick	用戶鼠標(biāo)左鍵點(diǎn)擊的時(shí)候觸發(fā)
ondblclick	用戶雙擊時(shí)候觸發(fā)
onchange	當(dāng)對(duì)象或者選中區(qū)內(nèi)容改變的時(shí)候觸發(fā)
onkeyup	當(dāng)用戶釋放鍵盤按鍵時(shí)候觸發(fā)（還有兩個(gè)事件onkeydown和onkeypress）
onload	瀏覽器加載完畢后立即觸發(fā)
onmouseout	當(dāng)用戶將鼠標(biāo)移出對(duì)象范圍時(shí)觸發(fā)
onmouseover	當(dāng)用戶數(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ú)為再寫一篇關(guān)于屬性的修改以及賦值。

演示得到焦點(diǎn)和失去焦點(diǎn)

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試文檔</title>

</head>
<body>
<!--可以在標(biāo)簽上直接綁定事件類型-->
<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="";
        }

    }
    // 也可以主頁綁定事件類型
    element.onblur=function () {
        console.log(element.value);
        if (element.value==""){
            element.value="請(qǐng)輸入";
        }
    }
</script>
</body>
</html>

演示鼠標(biāo)劃過和離開

<!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加載頁面事件

<!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è)頁面的加載所以一般都是window調(diào)用
    window.onload=function () {
        element1.innerText="innerText插入";
        element2.innerHTML="<h1>innerHTML插入</h1>"
        
    }
</script>
</body>
</html>

補(bǔ)充 innerText和innerHTML區(qū)別

innerText 在頁面上輸出文本內(nèi)容，直接將標(biāo)簽刪除
innerHTML在頁面上輸出標(biāo)簽效果以及其內(nèi)容。

onkeyup 鍵盤彈起事件

<!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)離開的時(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>