05 js中的事件

阿新 • • 發佈：2021-07-22

js中的事件

什麼是事件？事件是電腦輸入裝置與頁面進行互動的響應。我們稱之為事件。

常用的事件：

onload 載入完成事件：頁面載入完成之後，常用於做頁面 js 程式碼初始化操作
onclick 單擊事件：常用於按鈕的點選響應操作。
onblur 失去焦點事件：常用用於輸入框失去焦點後驗證其輸入內容是否合法。
onchange 內容發生改變事件：常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件：常用於表單提交前，驗證所有表單項是否合法。

一、事件的註冊

事件的註冊又分為靜態註冊和動態註冊兩種：

什麼是事件的註冊（繫結）？
其實就是告訴瀏覽器，當事件響應後要執行哪些操作程式碼，叫事件註冊或事件繫結。

靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊。

動態註冊事件：是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom 物件.事件名 = function(){} 這種形式賦於事件響應後的程式碼，叫動態註冊。

動態註冊基本步驟：
1、獲取標籤物件
2、標籤物件.事件名 = fucntion(){}

1.1 onload 載入完成事

示例程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      //onload事件的方法
      function onloadfun(){
        alert('靜態註冊onload事件,所有程式碼')
      }

      //onload事件動態註冊，是固定寫法
      window.onload = function (){
        alert("動態註冊的onload事件");
      }

    </script>
</head>

  <!--靜態註冊onload事件
      onload事件是瀏覽器解析頁面之後就會自動觸發的事件
      <body onload="alert('靜態註冊onload事件');alert('還能寫，太麻煩，')">
      <body onload="onloadfun()">
  -->

<body >

</body>
</html>

1.2 onclick 單擊事件

示例程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

    function onclickfun(){
      alert("靜態註冊onclick事件")
    }

    window.onclick = function (){
      //1.獲取標籤物件
      /*
      * document 是JavaScript語言提供的一個物件(文件)
      * get         獲取
      * Element     元素(就是標籤)
      * By          通過
      * Id          id屬性
      *
      * getElementById 通過id屬性獲取標籤物件
      * */
      var btnobj = document.getElementById("btn001");
      //alert(btnobj);

      //2.通過標籤物件.事件名  = function(){}
      btnobj.onclick = function (){
        alert("動態註冊的onclick事件")
      }

    }

  </script>
</head>
<body>
    <button onclick="onclickfun()">按鈕1</button>
    <button id="btn001">按鈕2</button>
</body>
</html>

1.3 onblur 失去焦點事件

示例程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurfun(){
            //console是控制檯物件，是由JavaScript語言提供，專門用來向瀏覽器的控制檯列印輸出，用於測試使用
            //log()是列印的方法
            console.log("靜態註冊失去焦點事件");
        }

        window.onblur = function (){
            //1.獲取標籤物件
            var passobj = document.getElementById("password");
            //物件.事件名 = function(){}
            passobj.onblur = function (){
                console.log("動態失去焦點事件");
            }
        }

    </script>
</head>
<body>

    使用者名稱：<input type="text" onblur="onblurfun()"/><br/>
    密碼：<input type="text" id="password"/><br/>

</body>
</html>

1.4 onchange 內容發生改變事件

示例程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onchangefun(){
      alert("女神改變了");
    }

    window.onchange = function(){
      //1.獲取標籤物件
      var selobj = document.getElementById("sel01");
      //物件.事件名 = function(){}
      selobj.onchange = function (){
        alert("男神改變了");
      }
    }
  </script>
</head>
<body>

    <select onchange="onchangefun()">
      <option>---你的女神---</option>
      <option>小紅</option>
      <option>小芳</option>
      <option>歡歡</option>
    </select>

    <select id="sel01">
      <option>---你的男神---</option>
      <option>洋洋</option>
      <option>哈哈</option>
      <option>呼呼</option>
    </select>


</body>
</html>

1.5 onsubmit 表單提交事件

示例程式碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onsubmitfun(){
      //要驗證所有表單項是否合法，如果有一個不合法就組織表單提交
      alert("靜態登錄檔單提交事件---發現不合法");

      return false;
    }

    window.onsubmit = function (){
      //1.獲取標籤物件
      var formobj = document.getElementById("form01");
      //物件.事件名 = function(){}
      formobj.onsubmit = function (){
        //要驗證所有表單項是否合法，如果有一個不合法就組織表單提交
        alert("動態登錄檔單提交事件---發現不合法");

        return false;
      }

    }

  </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
      <input type="submit" value="靜態註冊"/>
    </form>

    <form action="http://localhost:8080" >
      <input type="submit" value="動態註冊" id="form01"/>
    </form>
</body>
</html>