JavaScript事件

最新推荐文章于 2024-10-01 20:12:28 发布

不期望不希望不奢望

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/weixin_72101182/article/details/126231252

版权

鼠标事件键盘事件正则表达式表单验证网页交互

关键词由CSDN通过智能技术生成

响应用户操作，完成交互效果

一般可以分为鼠标事件、键盘事件和其他事件

鼠标事件案例：鼠标移入更换图片

    <nav>
        <div class="list">
            <img src="img/1.jpg" width="250px" alt="">
            <img src="img/2.jpg" width="250px" alt="">
            <img src="img/3.jpg" width="250px" alt="">
            <img src="img/4.png" width="250px" alt="">
            <img src="img/5.png" width="250px" alt="">
            <img src="img/6.jpg" width="250px" alt="">
        </div>
    </nav>
    <script>
        var imgs = document.querySelectorAll(".list img")
        var body = document.body
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onmouseover = function() {
                body.style.backgroundImage = "url(" + this.src + ")"
            }
        }
    </script>

//表单事件

获取/失去焦点 focus blur

change 对比获取焦点和失去焦点时里面内容不一样才会触发

input 只要内容不一样就触发

reset(重置事件) submit(提交事件)：这两个事件必须在form表单中才能使用

移动端的触摸事件：touchstart touchmove touchend

案例：鼠标跟随事件

<body>
    <div id="div_1">
        <img src="img/3.jpg" width="800px" alt="">
        <p>
            <strong>简介</strong><br> 故事发生的地点是在每千年回归一次的彗星造访过一个月之
前，日本飞驒市的乡下小町糸守町。在这里女高中生三叶每天都过着忧郁的生活，而她烦恼的不光有担任町长的父亲所举行的选举运动，还有家传神社的古老习俗。在这个小小的町，周围都只是些爱瞎操心的老人。为此三叶对于大都市充满了憧憬。 然而某一天，自己做了一个变成男孩子的梦。这里有着陌生的房间、陌生的朋友。而眼前出现的则是东京的街道。三叶虽然感到困惑，但是能够来到朝思暮想的都市生活，让她觉得神清气爽。另一方面在东京生活的男高中生立花泷也做了个奇怪的梦，他在一个从未去过的深山小町中，变成了女高中生。两人就这样在梦中邂逅了彼此。
        </p>
    </div>
    <script>
        var div_1 = document.getElementById("div_1")
        div_1.onmouseover = function() {
            this.lastElementChild.style.display = "block"
        }
        div_1.onmouseout = function() {
            this.lastElementChild.style.display = "none"
        }
        div_1.onmousemove = function(event) {
            this.lastElementChild.style.left = event.offsetX + "px"
            this.lastElementChild.style.top = event.offsetY + "px" //相对于左上角
        }
    </script>
</body>

正则表达式

\cx	匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S	匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。

特别字符	描述
$	匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身，请使用 \$。
( )	标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 $ 和 $。
*	匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。
+	匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 \+。
.	匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。
[	标记一个中括号表达式的开始。要匹配 [，请使用 \[。
?	匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。
\	将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\\' 匹配 "\"，而 '\(' 则匹配 "("。
^	匹配输入字符串的开始位置，除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身，请使用 \^。
{	标记限定符表达式的开始。要匹配 {，请使用 \{。
\|	指明两项之间的一个选择。要匹配 \|，请使用 \\|。

案例：正则表达式验证qq邮箱

<body>
    <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="text" id="email"><span></span></p>
    <script>
        var email = document.querySelector("#p3 input")
        email.onblur = function() {
            // console.log( "blur")
            //验证密码的格式:只能输入字母数字，并且长度至少是6位但不多于8位
            var reg = /^\w{5,}@[a-z0-9]{2,3}\.[a-z]+$|\,$/;
            var str = email.value
                //console. 1og (reg.test(str))
            var span = document.querySelector("#p3 span")
            if (reg.test(str) == true) {
                console.log("邮箱格式正确");
                span.innerHTML = ""
            } else {
                console.log("邮箱格式不正确");
                span.innerHTML = "邮箱格式不正确"
            }
        }
    </script>
</body>