1、事件监听机制概述

事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。

事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。
事件源：组件，如按钮、文本输入框；
监听器：代码。
注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听代码。

常见的事件：

1）点击事件：1、onclick：单击事件
2、ondbclick：双击事件
2）焦点事件：1、obblur：失去焦点，一般用于表单校验
2、onfocus：元素获得焦点
3）加载事件：1、onload：一张页面或一幅图像加载完成
4）鼠标事件：1、onmousedown：鼠标按钮被按下，定义方法时，定义一个形参接受event对象，event的属性可以获取鼠标哪个键被点击了（左键0，中键1，右键2） 2、onmousemove：鼠标被移动 3、onmouseout：鼠标从某元素移开 4、onmouseover：鼠标移到某元素之上 5、onmouseup：鼠标按钮被松开
5）键盘事件：1、onkeydown 某个键盘按键被按下 2、onkeypress 某个键盘按键被按下并松开 3、onkeyup 某个键盘按键被松开
6）选中和改变：1、onchange 域的内容被改变 2、onselect 文本被选中
7）表单事件：1、onsubmit 确认按钮被点击，方法返回false，则阻止表单提交 2、onreset 重置按钮被点击

【举例】基本事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>

    <script>
        //onload加载完成事件
        window.onload = function () {
/*            //失去焦点事件
            document.getElementById("username").onblur = function () {
                alert("失去焦点");
            }
            //鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function () {
                alert("鼠标来了");
            }*/
            //鼠标点击事件
/*            document.getElementById("username").onmousedown = function (event) {
                // alert("鼠标点击");
                alert(event.button);
            }*/
/*            //键盘点击事件
            document.getElementById("username").onkeydown = function (event) {
                // alert("鼠标点击");
                if(event.keyCode==13){
                    alert("回车提交表单");
                }
            }*/
/*            //改变事件
            document.getElementById("city").onchange = function (event) {
                alert("改变了");
            }*/
/*            //onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //校验用户名格式
                var flag = false;
                return flag; //返回true，则正确提交表单
            }*/
        }
        
    </script>

</head>
<body>
    <form action="#" id="form">
        <input type="text" name="username" id="username">
        <select id="city">
            <option>--请选择--</option>
            <option>--北京--</option>
            <option>--上海--</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>

2、表单验证实战

在之前的用户登录博文代码的基础上，添加表单校验的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("../image/6模糊背景.jpg") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background: white;
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p :first-child{
            color: FFD026;
            font-size: 20px;

        }
        .rg_left > p :last-child{
            color: grey;
            font-size: 20px;
        }
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 500px;
            margin-top: 20px;
            margin-left: 80px;
        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;

        }
        .rg_right > p :first-child{
            font-size: 10px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{
            width: 100px;
            height: 45px;
            text-align: left;
        }
        .td_right{
            padding-left: 20px;
        }
        .error{
            color: red;
        }
        #username,#psd,#email,#name,#tel,#gender,#date,#code{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #code{
            width: 110px;
        }
        #img_code{
            height: 30px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background: #FFD026;
            border: 1px solid #FFD026;
        }
    </style>
    <script>
        /*
        * 1、给表单绑定onsubmit事件，监听器中判断每一个方法校验的结构，如果都为true，则返回true，若有一个为false，则监听器返回false
        * 2、定义一些方法分别校验各个表单项
        * 3、给各个表单项绑定onblur事件
        * */
        window.onload = function () {
            document.getElementById("form").onsubmit = function () {
                //调用用户校验方法
                //调用密码校验方法
                return checkUsername() && checkPassword();
            }
            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("psd").onblur = checkPassword;

        }

        function checkUsername() {
            var username = document.getElementById("username").value;
            var reg_username = /^w{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<img src='../image/9正确.png' width='35' height='25'/>";
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
        function checkPassword() {
            var psd = document.getElementById("psd").value;
            var reg_psd = /^w{6,12}$/;
            var flag = reg_psd.test(psd);
            var s_psd = document.getElementById("s_password");
            if(flag){
                s_psd.innerHTML = "<img src='../image/9正确.png' width='35' height='25'/>";
            }else{
                s_psd.innerHTML = "密码格式有误";
            }
            return flag;
        }
    </script>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post" id="form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username"> 用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="uesrname" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="psd"> 密码</label></td>
                        <td class="td_right">
                            <input type="password" name="psd" id="psd">
                            <span id="s_password" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email"> email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name"> 姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel"> 手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="gender"> 性别</label></td>
                        <td class="td_right"><input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="date"> 出生日期</label></td>
                        <td class="td_right"><input type="date" name="date" id="date"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="code"> 验证码</label></td>
                        <td class="td_right"><input type="text" name="code" id="code">
                            <img id="img_code" src="../image/5验证码.png">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"> <input id="btn_sub" type="submit" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <div class="rg_right">
        <p>已有账号? <a href="#">立即登录</a></p>
    </div>
</div>

</body>
</html>

本文为博主原创文章，转载请注明出处。

JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

1、事件监听机制概述

2、表单验证实战