五种常用的事件：

onload 加载完成事件：

页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件：

常用于按钮的点击响应操作。

onblur 失去焦点事件：

常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件：

常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件：

常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种：

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

1.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        window.onload=function () {
            alert("动态加载事件")
        }
    </script>
</head>
<body onload=alert("静态注册")>

</body>
</ht

2.onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
       window.onload=function () {
           var elementById = document.getElementById("12345");
           // alert(elementById)
           elementById.onclick=function () {
               alert("动态")
           }
       }
    </script>
</head>
<body>
<button onclick=alert("静态")>1</button>
<button id="12345">2</button>
</body>
</html>

3.onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
      function fun() {
          console.log("1111");
      }
      window.onload=function () {
          var id = document.getElementById("1111");
          id.onblur=function () {
              console.log("2222")
          }
      }
    </script>
</head>
<body>
账号<input type="text" onblur=fun()><br>
密码<input type="text" id="1111">
</body>
</html>

4.onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        function fun() {
            alert("静态修改成功")
        }
        window.onchange=function () {
            var id = document.getElementById("1111");
            id.onchange=function () {
                alert("动态")
            }
        }
    </script>
</head>
<body>
<select onchange=fun()>
    <option>请选择</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select><br>
<select id="1111">
    <option>请选择</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
</body>
</html>

5.onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript">
        function onsubmitfun() {
            alert("信息不合法，请重新输入")
            return false;
        }
        window.onsubmit=function () {
            var id = document.getElementById("1111");
            id.onsubmit=function () {
                alert("信息不合法，请重新输入")
                return false;
            }
        }
    </script>
</head>
<body>
<form action="https://www.bilibili.com/" method="get" onsubmit=" return onsubmitfun()">
<input type="submit" value="静态注册">
</form>
<form action="https://www.bilibili.com/"  id="1111">
<input type="submit" value="静态注册">
</form>
</body>
</html>
```
```

JS五种事件注册方式