JavaScript中的事件-CSDN博客

本文链接：https://blog.csdn.net/qq_45869071/article/details/107616286

常用的事件
onload 加载完成事件：内面加载完成后，常用于做页面js代码初始化操作

onclick 单击事件：常用于按钮的点击响应操作

onblur 时区焦点事件：常用于输入框失去焦点后验证其输入内容是否合法

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

onsubmit 表单提交事件：用于表单提交前，验证所有表单石佛合法

事件的注册分为静态注册和动态注册：
什么是事件的注册：
其实就是告诉浏览器，当事件响应后要执行那些操作代码

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码

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

动态注册的基本步骤：
1.获取标签对象
2.标签对象.事件名=function（）{}

onload事件：
静态注册onload事件：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件，所有代码');
        }
    </script>
</head>
<!-- 静态注册onload事件onload事件是浏览器解析完页面后会自动促发的事件 -->
<body onload="onloadFun();">
</body>
</html>

动态注册onload事件


<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      //onload事件动态注册是固定写法
        window.onload=function(){
            alert('动态注册onload事件')
        }
    </script>
</head>
<body>
</body>
</html>

onclick事件：


<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function onclickFun() {
                alert('静态注册onclick事件');
            }
            //动态注册onclick事件
            window.onload=function(){
                /*
                *document是JavaScript语言提供的一个对象（文档）
                *get            获取
                *Element        元素（就是标签）
                *By             通过
                *Id             id属性
                */
                var btnObj= document.getElementById("btn01");
                btnObj.onclick=function(){
                    alert('动态注册的onclick事件');
                }
            }
        </script>
     </head>
    <body>
        <!-- 静态注册onclick事件 -->
        <button onclick="onclickFun();">按钮1</button>
        <button id="btn01">按钮2</button>
    </body>
</html>

onblur事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //静态注册失去焦点事件
    function onblurFun(params) {
        console.log("静态注册失去焦点事件");
    }
    //静态注册失去焦点事件
    window.onload=function(){
        //1.获取标签对象
       var passwordObj= document.getElementById("password");
       passwordObj.onblur=function(){
        console.log("动态注册失去焦点事件");
       }
    }
    </script>
</head>
<body>
    用户名: <input type="text" onblur="onblurFun()"><br/>
    密码: <input id="password" type="text"><br/>  
</body>
</html>

onchange事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function onchangeFun(){
        alert('女神已经改变了');
        }
        window.onload=function(){
            var onchangObj=document.getElementById("男神");
            onchangObj.onchange=function(){
                alert('男神已经改变了');
            }
        }
    </script>
</head>
<body>
    请选择你心中的女神：
    <select onchange="onchangeFun();">
        <option >--女神1--</option>
        <option >--女神2--</option>
        <option >--女神3--</option>
        <option >--女神4--</option>
    </select>
    请选择你心中的男神：
    <select id="男神">
        <option >--男神1--</option>
        <option >--男神2--</option>
        <option >--男神3--</option>
        <option >--男神4--</option>
    </select>
</body>
</html>

onsubmit 表单提交事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function onsubmitFun(){
        //要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
        alert('静态注册表单提交事件----发现不合法');
        return false;
        }
        window.onload=function(){
            var onsubmitObj=document.getElementById("form01");
            onsubmitObj.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" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>