JavaScript事件,正则表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72173210/article/details/126239958

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

实例：

<div id="div_0">抽奖</div>
    <script>
        var div_0 = document.querySelector("#div_0")
            //绑定事件
            //第一种方式:将前面的事件进行覆盖ll 
        div_0.onclick = function() {
            // console.log("单击事件")
        }
        div_0.onclick = function() {
                console.log("单击事件2")
                div_0.onclick = null //解绑
            }
            // 第二种方式addEventListener():这种方式可以实现一个元素绑定多个相同的事件
        function test() {
            console.log("单击事件2")
        }
        div_0.addEventListener("click", function() {
            console.log("单击事件1")
        })
        div_0.addEventListener("click", test)
        div_0.removeEventListener("click", test) //解绑removeEventListener()

        //解绑
        // div_0.onclick=null
    </script>

效果：

定义和用法

onmouseover 事件会在鼠标指针移动到指定的元素上时发生。

onmouseover()事件实例：

<div class="list">
        <img src="img/bg.png" alt="">
        <img src="img/bg1.jpg" alt="">
        <img src="img/bg2.jpg" alt="">
        <img src="img/bg3.jpg" alt="">
        <img src="img/bg4.jpg" alt="">
        <img src="img/bg5.jpg" alt="">
        <img src="img/bg6.jpg" alt="">
    </div>

<script>
        var body = document.body
        var imgs = document.querySelectorAll(".list img")
            // 给图片绑定鼠标移入的事件
        for (var i = 0; i < imgs.length; i++) {
            // 绑定事件
            imgs[i].onmouseover = function() {
                // console.log(this.src)
                body.style.backgroundImage = "url(" + this.src + ")"
            }
        }
    </script>

效果：

onmouseout事件实例：

<style>
        .div_0 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .div_1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

<div class="div_0">
        <div class="div_1"></div>
    </div>
    <script>
        // mousedown mousemove mouseup
        var div_0 = document.querySelector(".div_0")
        div_0.onmousedown = function() {
            console.log("鼠标按下")
            div_0.classList.add("down")
            div_0.onmousemove = function() {
                console.log("鼠标移动")
            }
            div_0.onmouseup = function() {
                div_0.classList.add("up")
                console.log("鼠标抬起")
            }

            // onmouseover onm @useout会将事件同时绑定到子元素上
            div_0.onmouseover = function() {
                div_0.classList.add("up")
                console.log("鼠标移入")
            }
            div_0.onmouseout = function() {
                div_0.classList.add("up")
                console.log("鼠标移出")
            }
        }
    </script>

效果：

onkeydown键盘事件实例：

<input type="text" id="username">
    <script>
        // 键盘事件
        var username = document.querySelector("#username")
        username.onkeydown = function() {
            console.log("按键按下")
        }
        username.onkeyup = function() {
            console.log("按键抬起")
        }
    </script>

效果：

正则表达式

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

案例：

    <p id="p0">用户名：<input type="text" id="username"><span></span></p>
    <p id="p1">密码：<input type="password" id="pwd"><span></span></p>
    <p id="p2">年龄：<input type="text" id="age"><span></span></p>
    <p id="p3">邮箱：<input type="email" id="email"><span></span></p>

    <script>
        var pwd = document.querySelector("#p1 input")
        pwd.onblur = function() {
            // 验证密码的格式：只能输入字母数字，并且长度至少是6位但不多于8位
            var reg = /\b[a-zA-Z0-9]{6,8}\b/
            var str = pwd.value
            if (reg.test(str) == true) {
                console.log("密码格式正确")
            } else {
                console.log("密码格式不正确")
            }
        }
        var eml = document.querySelector("#p3 input")
        eml.onblur = function() {
            // 验证密码的格式：只能输入字母数字，并且长度至少是6位但不多于8位
            var mge = /\b[\w.%+-]+@[\w>-]+\.[a-zA-Z]{2,6}\b/
            var str = email.value
            if (mge.test(str) == true) {
                console.log("邮箱格式正确")
            } else {
                console.log("邮箱格式不正确")
            }
        }
    </script>