JavaScript中DOM操作常用事件總結

2022-04-18 19:00:04

常用事件

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

常用的事件有：

事件型別	描述
onblur	物件失去焦點的時候觸發
onfous	當獲得焦點的時候觸發
onclick	使用者滑鼠左鍵點選的時候觸發
ondblclick	使用者雙擊時候觸發
onchange	當物件或者選中區內容改變的時候觸發
onkeyup	當用戶釋放鍵盤按鍵時候觸發（還有兩個事件onkeydown和onkeypress）
onload	瀏覽器載入完畢後立即觸發
onmouseout	當用戶將滑鼠移出物件範圍時觸發
onmouseover	當用戶數滑鼠在物件上滑動的時候觸發
onselect	噹噹前選擇區改變時觸發
onunload	物件解除安裝前理解觸發

下面演示的時候會有些涉及到涉及到一些屬性的變化，可以先不關心而是關係這個事件是如何觸發發。後面單獨為再寫一篇關於屬性的修改以及賦值。

演示得到焦點和失去焦點

演示：

<!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載入是監控的是這個頁面的載入所以一般都是window呼叫
    window.onload=function () {
        element1.innerText="innerText插入";
        element2.innerHTML="<h1>innerHTML插入</h1>"
        
    }
</script>
</body>
</html>

補充 innerText和innerHTML區別

innerText 在頁面上輸出文字內容，直接將標籤刪除
innerHTML在頁面上輸出標籤效果以及其內容。

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("你在輸入內容啊")
    }
    
</script>
</body>
</html>

內容變化事件

演示：

<!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.onchange=function () {
          alert("你在修改嗎？")
    }

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

選中時觸發

<!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>