【js中的正则表达式和事件处理】

林钟十九·

已于 2022-05-10 09:32:18 修改

阅读量283

点赞数

文章标签： javascript 前端 html html5 开发语言

于 2022-05-09 20:02:03 首次发布

本文链接：https://blog.csdn.net/qq_45753546/article/details/124660725

版权

1. 正则

1.1 正则的概念
正则是js的内置对象是对字符串的描述。描述字符串是否合法

1.2 作用：
1）表单验证（减少后端无意义的请求）
2）提取字符串（比如提取手机验证码）
3）替换字符串中的数据
1.3 正则的基本语法

在这里插入图片描述
正则表达式语法
[a-z]:大写字母
[A-Z]:大写字母
[0-9]:所有数字
[a-zA-Z0-9]所有数字大小写字母
^ 开头
$ 结尾
{n,m}: 最小 n 个，最大 m 个

       1. 密码的正则
        /^[a-zA-Z0-9_]{6,12}$/
        
    2. 用户名正则
        /^[\u4E00-\u9FA5a-zA-Z0-9_]{2,12}$/
        
    3. 邮箱正则
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

// 正则表达式.test(字符串)
        let reg = /"d"/
        let str = "defout";
        let res = reg.test(str);
        console.log(res);


/*正则表达式语法 
        [a-z]:大写字母
        [A-Z]:大写字母
        [0-9]:所有数字
        [a-zA-Z0-9]所有数字大小写字母
        ^ 开头
        $ 结尾*/
        let reg1 = /"^[0-9],[a-z]$"/
        let str1 = "2997410136@qq.com"
        let res1 = reg1.test(str1) 
        console.log(res1);

2. 事件【理解】

event.target:事件源（可以做事件委托）
event.type: 事件类型
event.clientX: X轴的坐标
event.clientY: Y轴的坐标
event.keyCode:键盘码

浏览器默认行为
阻止form表单默认提交
event.preventDefault()：阻止浏览器默认行为
1）

<body>
    <form action="#">
      用户名：  <input type="text" name="username">
      密码：<input type="text" name="password">
      <input type="submit">
    </form>
    <script>
        let form = document.querySelector("form")
        form.addEventListener("submit",function(event){
            event.preventDefault()
        })
    </script>
</body>

阻止事件冒泡
event.stopPropagation()

<div class="one" style="background-color:pink; height: 500px;width: 400px;border: 1px solid #000;">
        <div class="two" style="background-color:#ab848b;width: 300px;height: 400px;">
            <div class="three" style="background-color:#69b0d1;width: 200px;height: 300px;"></div>
        </div>
    </div>
    <script>
        let one =document.querySelector(".one");
        let two =document.querySelector(".two");
        let three =document.querySelector(".three")
        one.addEventListener("click",function(){
            alert("1")
            event.stopPropagation()
        });
        two.addEventListener("click",function(){
            alert("2")
            event.stopPropagation()
        });
        three.addEventListener("click",function(event){
            alert("3")
            event.stopPropagation()
        });

    </script>

什么叫冒泡:
事件的三个阶段:

捕获阶段
dom.addEventListener(‘事
件类型’,function(){},true)
目标阶段
冒泡阶段
dom.addEventListener(‘事
件类型’,function(){},false)

问题1:

页面上有 ul li 标签,给每一个 li 标签注册
点击事件
通过 js 新增 li 标签
新增的 li 标签没有事件了

解决方案:
事件委派: 委派给父级来处理

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul =document.querySelector("ul");
        let lis = document.querySelectorAll("ul li")
       
        // 通过js添加li标签
        for(let i=0;i<8;i++){
            // 创建标签
            let li =document.createElement("li");
            // 在li标签中添加文本
            li.innerText = i+4
            // 追加到ul中
            ul.appendChild(li)
        }
        // 给 ul注册点击事件
        ul.addEventListener("click",function(event){
           if(event.target.nodeName === "LI"){
               console.log(event.target);
           }
           
        })
    </script>

问题2:

页面上有过多的 li 标签
给每一个 li 注册点击事件
占用过多内存

事件委派: 给父元素添加点击事件,再通过
event.target 找到事件源的方式,找到每一个子元素,这样的好
处是:
1.事件只有一个,减少内存的消耗
2.新增的子元素,也有点击事件

林钟十九·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【js中的正则表达式和事件处理】

1. 正则1.1 正则的概念正则是js的内置对象是对字符串的描述。描述字符串是否合法1.2 作用：1）表单验证（减少后端无意义的请求）2）提取字符串（比如提取手机验证码）3）替换字符串中的数据1.3 正则的基本语法正则表达式语法[a-z]:大写字母[A-Z]:大写字母[0-9]:所有数字[a-zA-Z0-9]所有数字大小写字母^ 开头$ 结尾{n,m}: 最小 n 个，最大 m 个 1. 密码的正则 /^[a-zA-Z0-9_]{6,1
复制链接

扫一扫