javaweb2021.10.03（冲！）

最新推荐文章于 2024-11-08 16:09:18 发布

sgfy_

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量229

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/sgfy_/article/details/120598734

版权

这篇博客介绍了JavaScript中常见的三种事件处理：onblur（失去焦点）、onchange（内容改变）和onsubmit（表单提交）。示例代码展示了如何静态和动态注册这些事件，以及如何阻止表单非法提交。对于前端开发人员理解网页交互和表单验证至关重要。

摘要由CSDN通过智能技术生成

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun() {
            //console是控制台对象，是由JavaScri语言提供，专门用来向浏览器的控制台打印输出，用于测试使用
            //log()是打印方法
            console.log("静态注册失去焦点事件");
        }
        //静态注册onblur事件
        window.onload=function () {
        //1.获取标签对象
            var passwordObj=document.getElementById("password");
            //alert(passwordObj);
        //2.通过标签对象.事件名=function(){};
            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">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("男神已经改变了");
        }
        <!--动态注册onchange事件-->
        window.onload=function () {
            //1.获取标签对象
            var selObj = document.getElementById("s01");
            //2.通过标签对象.事件名=function(){}
            selObj.onchange=function () {
                alert("男神已经改变了");
            }

        }
    </script>
</head>
<body>
    请选择你心中的男神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun()">
        <option>---男神---</option>
        <option>dog</option>
        <option>cat</option>
        <option>panda</option>
        <option>fish</option>
    </select>

    请选择你心中的男神：
    <select id="s01">
        <option>---男神---</option>
        <option>dog</option>
        <option>cat</option>
        <option>panda</option>
        <option>fish</option>
    </select>
</body>
</html>

onsumbit表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function onsubmitFun() {
            //要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
           alert("静态注册表单提交事件---发现不合法");
           return false;//return ture提交
        }
        window.onload=function () {
            //1.获取标签对象
            var formObj = document.getElementById("form01");
            //2.通过标签对象.事件名
            formObj.onsubmit=function () {
                //要验证所有表单项是否合法
                alert("静态注册表单提交事件---发现不合法");
                return false;//return ture提交
            }
        }
    </script>
</head>
<body>
    <!--return false 可以阻止表单提交-->
    <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>