快捷導航

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

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

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

常用事件

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

常用的事件有：

事件類型	描述
onblur	對象失去焦點的時候觸發(fā)
onfous	當獲得焦點的時候觸發(fā)
onclick	用戶鼠標左鍵點擊的時候觸發(fā)
ondblclick	用戶雙擊時候觸發(fā)
onchange	當對象或者選中區(qū)內(nèi)容改變的時候觸發(fā)
onkeyup	當用戶釋放鍵盤按鍵時候觸發(fā)（還有兩個事件onkeydown和onkeypress）
onload	瀏覽器加載完畢后立即觸發(fā)
onmouseout	當用戶將鼠標移出對象范圍時觸發(fā)
onmouseover	當用戶數(shù)鼠標在對象上滑動的時候觸發(fā)
onselect	當當前選擇區(qū)改變時觸發(fā)
onunload	對象卸載前理解觸發(fā)

下面演示的時候會有些涉及到涉及到一些屬性的變化，可以先不關(guān)心而是關(guān)系這個事件是如何觸發(fā)發(fā)。后面單獨為再寫一篇關(guān)于屬性的修改以及賦值。

演示得到焦點和失去焦點

演示：

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

</head>
<body>
<!--可以在標簽上直接綁定事件類型-->
<label>姓名</label> <input  id="testid" type="text" onfocus="test_foncus()" value="請輸入">


<script>
    var element=document.getElementById("testid");
    function test_foncus() {
        if (element.value=="請輸入"){
            element.value="";
        }

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

演示鼠標劃過和離開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試文檔</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>

點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試文檔</title>
   <style>
 
   </style>
</head>
<body>

<button id="testid">點擊按鈕</button>

<script>
    var element=document.getElementById("testid");
    element.onclick=function () {
      confirm("你確定你要點擊？")
    }

</script>
</body>
</html>

load加載頁面事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試文檔</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)控的是這個頁面的加載所以一般都是window調(diào)用
    window.onload=function () {
        element1.innerText="innerText插入";
        element2.innerHTML="<h1>innerHTML插入</h1>"
        
    }
</script>
</body>
</html>

補充 innerText和innerHTML區(qū)別

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

onkeyup 鍵盤彈起事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試文檔</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>測試文檔</title>
    <style>

    </style>
</head>
<body>

 <input id="testid" type="text">
<script>
    var element=document.getElementById("testid");
    // 到鼠標離開的時候就會變得是否內(nèi)容修改
    element.onchange=function () {
          alert("你在修改嗎？")
    }

</script>
</body>
</html>

選中時觸發(fā)

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

    </style>
</head>
<body>

<input id="testid" type="text"  value="點擊兩次選選擇">
<script>

        var element=document.getElementById("testid");
        element.onselect=function () {

          alert(element.value);
        }

</script>
</body>
</html>