[JavaScript知识库] JavaScript事件

1.onload 加载完成事件：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*

         */
        // onload事件的方法
        function onloadfun(){
            alert("静态注册");
        }

        //onload事件动态注册
        window.onload = function (){
            alert("onload的动态注册");
        }
    </script>
</head>
<!-- 静态注册
 浏览器解析完页面自动执行
 <body onload="onloadfun();">
 -->
<body>

</body>
</html>

2.onclick 单击事件：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态onclick");
        }

        window.onload = function (){
            //1.获取标签对象
            //通过id属性获取标签对象
            var btn = document.getElementById("btn01");
            btn.onclick = function (){
                alert("动态注册的onclick事件");
            }
            //2.通过标签对象.事件名 = function(){}
        }
    </script>
</head>
<body>
    <button onclick="onclickFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

3.onblur 失去焦点事件：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun(){
            //console是控制台对象
            //log()打印的方法
            console.log("静态注册失去焦点事件");
        }

        //动态注册 onblur事件
        window.onload = function (){
            //1.获取标签名
            var byId = document.getElementById("password");
            //2.通过标签对象.事件名
            byId.onblur = function (){
                console.log("动态注册失去焦点事件");
            }

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

</body>
</html>

4.onchange 内容发生改变事件：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("already change");
        }

        window.onload = function (){
            var elementById = document.getElementById("select01");
            elementById.onchange = function (){
                alert("already change");
            }
        }
    </script>
</head>
<body>
选择：
        <select onchange="onchangeFun()">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select></br>
选择：
        <select id="select01" onchange="onchangeFun()">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>

</body>
</html>

5.onsubmit 表单提交事件：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //静态
        function onsubmitFun(){
            alert("表单不合法");
            return false;
        }
        //动态
        window.onload = function (){
            var elementById = document.getElementById("sub01");
            elementById.onsubmit = function (){
                //验证是否合法
                alert("动态提交");
                return true;
            }
        }
    </script>
</head>
<body>
        <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
                <input type="submit" value="静态注册"></br>
        </form>
        <form action="http://localhost:8080" id="sub01" method="get" >
            <input type="submit" value="动态注册"></br>
        </form>
</body>
</html>

[JavaScript知识库]JavaScript事件