事件:是电脑输入设备与页面进行交互的响应。

常用的事件：

  • onload加载完成事件：页面加载完成之后，常用于做页面JS代码初始化操作。
  • onclick单击事件：常用于按钮的点击响应操作。
  • onblur失去焦点事件：常用与输入框失去焦点后，验证其内容是否合法。
  • onchange内容发送改变事件：常用于下拉列表和输入框内容发生改变后操作。
  • onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法。

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

  • 什么是事件的注册（绑定）？
  • 告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
  1. 静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码。
  2. 动态注册事件：是指先通过JS代码得到标签的DOM对象，然后再通过DOM对象，事件名=function（）{}这种形式赋予事件响应后的代码。 
 `动态注册基本操作：
1、获取标签对象
2、标签对象.事件名 = function(){
   }`

onload事件：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>giao就玩了</title>
    <script >
        function onloadFun(){
   
            alert("静态注册onload事件");
        }

        // onload事件动态注册，固定写法
        window.onload =  function(){
   
            alert("动态注册的onload事件");
        }
    </script>

</head>

<body onload="onloadFun()">
    
</body>

onclick事件：

静态：

    <script >
        function onclickFun(){
   
            alert("静态");
        }
    </script>

</head>

<body >
    <button onclick="onclickFun();">
        按钮1
    </button>
    <button id="btn01">按钮2</button>
</body>

动态：

    <script >
        window.onload = function(){
   
            var btn01 =document.getElementById("btn01");
            btn01.onclick=function(){
   
                alert("动态注册的onclick事件")
            }

        }
    </script>

</head>

<body >
    <button onclick="onclickFun();">
        按钮1
    </button>
    <button id="btn01">按钮2</button>

onblur事件：

    <script >
        
        function onblurFun(){
   
            alert("干啥啊？？？");
        }

        window.onload = function(){
   
            var password1=document.getElementById("password");

            password1.onblur=function(){
   
                alert("干啥咋不输入？");
            }
        }
    </script>

</head>

<body>
    用户名：<input type="text" onblur="onblurFun();"> <br/>
    密码：<input id="password" type="password">
</body>

onchange事件：

    <script >
        function onchangeFun(){
   
            alert("giao吗？");
        }

        window.onload = function(){
   
            var seloj=document.getElementById("sel2");

            seloj.onchange=function(){
   
                alert("到底giao不giao？");
            }
        }
    </script>

</head>

<body>
    <select id="sel1" onchange="onchangeFun();">
        <option >大佬</option>
        <option >菜鸡</option>
        <option >辣鸡</option>
        <option >炖鸡</option>
    </select>

    <select  id="sel2" onchange="onchangeFun();">
        <option >大佬</option>
        <option >菜鸡</option>
        <option >辣鸡</option>
        <option >炖鸡</option>
    </select>
</body>

onsubmit事件：

返回true提交上去，false不会提交
    <script >
        function onsubmitFun(){
   
            alert("静态注册onsubmit操作");
            return true;
        }

        window.onload = function(){
   

            var formobj=document.getElementById("form01");
            formobj.onsubmit=function(){
   
                alert("动态注册onsubmit操作");
                return false;
            }
        }

    </script>

</head>

<body>
    <form action="#" method="GET" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册">
    </form>

    <form action="#" id="form01">
        <input type="submit" value="动态注册">
    </form>
</body>