JavaScript-onload事件、onclick事件、onblur事件、onchange事件、onsubmit事件

JavaScript-onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        onload 加载完成事件:	页面加载完成之后,常用于做页面 js 代码初始化操作
         */

        //onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件,所有代码');
        }

        //onload事件动态注册。是固定写法
        window.onload = function () {}
        alert("动态注册的onload事件");
    </script>
</head>
<!-- 静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
        <body onload="onloadFun()">
 -->
<body onload="onloadFun()">

</body>
</html>

JavaScript-onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        onclick 单击事件:		常用于按钮的点击响应操作。
         */

        function onclickFun(){
            alert("静态注册onclick事件")
        }

        //动态注册onclick事件
        window.onload = function () {
            // 1. 获取标签对象
            /*
            document 是 JavaScript 语言提供的一个对象(文档)

            get             获取
            Element         元素(就是标签)
            By              通过。。    由。。经。。
            Id              id属性

            getElementById通过id属性获取标签对象

             */
            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            // 2. 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件")
            }
        }
    </script>
</head>
<body>
    <!-- 静态注册onClick事件

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

</body>
</html>

JavaScript-onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        onblur 失去焦点事件:	常用用于输入框失去焦点后验证其输入内容是否合法。
         */

        // 静态注册失去焦点事件
        function onblurFun() {
            // console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
            // 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>

JavaScript-onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        onchange 内容发生改变事件:	常用于下拉列表和输入框内容发生改变后操作
         */

        function onchangeFun() {
            alert("女神已经改变了");
        }

        window.onload = function () {
            //1. 获取标签对象
            var selObj = document.getElementById("sel01");
            alert(selObj);
            //2. 通过标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已经改变了")
            }
        }

    </script>
</head>
<body>
    请选择你心中的女神:
    <!-- 静态注册onchange事件 -->
    <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>

JavaScript-onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        onsubmit 表单提交事件:	常用于表单提交前,验证所有表单项是否合法。
         */

        //静态注册表单提交事件
        function onsubmitFun() {
            // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");

            return false;
        }

        window.onload = function () {
            //1. 获取标签对象
            var formObj = document.getElementById("form01");
            alert(formObj);
            //2. 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");

                return false;
            }
        }
    </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>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇