【JAVA】JavaScript下（事件监听）

Lx_Hy_

于 2022-07-23 18:00:58 发布

阅读量289

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/huihu__/article/details/125949161

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

【JavaScript事件】

【事件监听】

【事件绑定】

【两种方式】

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" οnclick='on()’>

function on(){
alert("我被点了");
}

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick = function (){
alert("我被点了");
}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--方式一:-->
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn">
<script>
    function on() {
        alert("我被点了");
    }
    //方式二:
    document.getElementById("btn").onclick = function () {
        alert("我被点了")
    }
</script>
</body>
</html>

【常见事件】

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某个元素之上
onmouseout	鼠标从某元素移开

Event：代表事件对象

【正则表达式】

【概述】

正则表达式定义了字符串组成的规则

【定义】

1.直接量：注意不要加引号

var reg = /^\w{6,12}$/;

2.创建 RegExp 对象

var reg = new RegExp("^\\w{6,12}$");

【方法】

test(str)：判断指定字符串是否符合规则，返回 true或 false

【语法】

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
\d：代表数字字符：相当于 [0-9]
量词：
+：至少一个（例：var reg = /^\w+$/;）
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //规则：单词字符6~12
    var reg=/^\w{6,12}$/;
    var str ="abcccc";
    var flag=reg.test(str);
    alert(flag);
</script>
</body>
</html>

【项目示例】——表单验证

当输入框失去焦点时，验证输入内容是否符合要求
当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>
    //验证用户名是否符合规则
    //获取用户名的输入框
    var usernameInput = document.getElementById("username");
    //绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //获取用户输入的用户名
        var username = usernameInput.value.trim();
        //判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);
        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //验证密码是否符合规则
    //获取密码的输入框
    var passwordInput = document.getElementById("password");
    //绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //获取用户输入的密码
        var password = passwordInput.value.trim();
        //判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);
        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

    //验证手机号是否符合规则
    //获取手机号的输入框
    var telInput = document.getElementById("tel");

    //绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //获取用户输入的手机号
        var tel = telInput.value.trim();
        //判断手机号是否符合规则：长度 11，数字组成，第一位是1
        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }

    //获取表单对象
    var regForm = document.getElementById("reg-form");
    //绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
        var flag = checkUsername() && checkPassword() && checkTel();
        return flag;
    }
</script>
</body>
</html>