• JS事件委托与正则表达式浅知

    event.target

    触发事件的对象的引用

    首先我们先创建两个div，第一个div1包裹第二个div2

    然后给div1绑定一个点击事件然后我们把e.target和this函数输出出来，这个时候点div1，它们两个指向是一模一样的，但是这个时候你点div1里的div2，就不一样了。this指向的肯定是调用函数的div1，但是这个时候事件对象的target指向的就是div2了，因为target指向的是你触发事件的对象，你点谁它就指向谁，但是你点了子元素，this指向的依然是父元素，因为这个事件的处理函数绑定的就是父元素。

    事件委托

    当元素有多个子元素需要绑定同样的事件时只需要给父元素绑定一次就行了
    因为子元素会通过事件冒泡找到父元素的事件处理函数
    而且后期添加的子元素也可以直接使用父元素事件处理函数
    事件委托：为了减少事件监听的个数，提高执行效率
    1.浏览器触发事件是从上到下遍历，队伍监听的对象多就慢
    2.减少监听就是找父元素绑定，子元素通过冒泡事件共享父元素的事件使用
    3.无论多少个子元素共享一个事件处理函数，即使动态添加元素也可以自动获得处理函数
    事件委托原理：
    1事件仅绑定父元素一次
    2.目标元素必须经过判断条件才能指向后续操作
    3用e.target代替this获得目标元素

    有什么用呢？举个栗子，我们来用它实现一下简单的计算器

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <div id="key">
    11.         <button>1</button>
    12.         <button>2</button>
    13.         <button>3</button><br>
    14.         <button>4</button>
    15.         <button>5</button>
    16.         <button>6</button><br>
    17.         <button>7</button>
    18.         <button>8</button>
    19.         <button>9</button><br>
    20.         <button>+</button>
    21.         <button>-</button>
    22.         <button>=</button><br>
    23.         <button>C</button>
    24.         <button>*</button>
    25.         <button>/</button><br>
    26.         <button>(</button>
    27.         <button>)</button>
    28.     </div><!-- 让你的大小不可以调整 -->
    29.     <textarea name="" id="show" style="resize: none;width: 200px;height: 50px;"></textarea>
    30.     <script>
    31.         key.onclick=function(e){
    32.             //这个判断标签必须要大写
    33.             if(e.target.nodeName=='BUTTON'){
    34.                // 始终保存目标元素，不会随着事件冒泡改变
    35.               /*   console.log(`${e.target.innerHTML}啊`); */
    36.               switch(e.target.innerHTML){
    37.                   case 'C':
    38.                       show.value=''//清空显示框
    39.                       break
    40.                   case '='://先点的元素减后点的元素
    41.                       //先判断显示框有无内容
    42.                       if(show.value!==''){
    43.                           try{
    44.  
    45.                               show.value=eval(show.value)//将显示的内容放进eval（）进行计算然后得到相应的返回结果
    46.                           }catch(err){
    47.                               xs.value=err
    48.                           }
    49.                       }//并将结果放进显示中。eval方法的参数是一个字符串，如果字符串是一个表达式自动求值
    50.                       break
    51.                       default:
    52.                           show.value+=e.target.innerHTML
    53.               }
    54.             }
    55.         }
    56.     </script>
    57. </body>
    58. </html>

    正则

    正则表达式，它在js里面还是有点地位的

    它常见于以下方法中

    exec（）、test（）、match（）、matchAll（）、search（）、replace（）、spilt（）

    正则表达式也是对象

    建立正则表达式的两种方式
    new 创建RegExp（参数1，参数2）
    参数1：表达式主体，用于检索，参数2表示修饰符
    常见标志：标志是加在正则表达式后面的具有特殊功能的字母

    i:忽略大小写

    g:全局匹配 

    m：多行搜索   

    s：允许.匹配换行符 

    u:使用Unicode码的模式进行匹配

    y:执行‘粘性’搜索，匹配从目标字符串的当前位置开始
    正则表达式固定搭配：

    /^开头第一个字符是$前是结尾的最后一个字符/

    \w：匹配单词（这里的单词并不是一个完整的英语单词而是一个字母或者是数字）

    \W：匹配非单词

    {}：里面可以写一个正整数，表示前面的字符出现了多少次。也可以写{正整数，}里面是正整数逗号的时候表示的是前一个字符至少出现了多少正整数次。还可以写两个正整数，中间用逗号隔开。第一个正整数表示最少出现多少次，第二个正整数表示最多出现多少次

    []：表示一个字符集合，匹配写在里面的任何字符，可以用破折号-来指定字符范围。如果这个方括号里面的第一个字符是幂标识^的话，那就是说匹配除了这个方括号里面的所有字符。

    [\b]匹配一个退格

    \b:匹配单词的开头或者结尾，请注意单词的的开头和结尾不能有其它的单词直接相连

    \B：匹配非单词边界的值，那什么是边界呢？不同类型就是边界  /W边界/w，这个位置前面是非单词，后面是单词，它前后不一样，这就是边界，同类型就没有边界，就是/w/w和/W/W 前后一致不叫边界。

    \c：一般后面加一个字符表示，如果这个字符在二十六个字母之中，就匹配字符串的一个控制符。

    \d：匹配一个数字（相当于[0-9]）

    \D：匹配一个非数字

    \f：匹配一个换页符

    \n：匹配一个换行符

    \r：匹配一个回车符

    \s：匹配一个空白字符包括但不限于空格符、制表符、换页符、换行符

    \S：匹配一个非空白字符

    \v：匹配一个垂直制表符

    \t:匹配一个水平制表符

    \一个整数：最后第整数个子捕获匹配的子字符串(捕获的数目以左括号计数)

    \0：匹配null字符，请不要在后面加小数，因为这是一个八进制的0

    \xhh:匹配一个两位十六进制数（\x00-\xFF）表示的字符。

    \uhhhh:匹配一个四位十六进制数表示的 UTF-16 代码单元。

    \u{hhhh}:仅当设置了u标志时,匹配一个十六进制数表示的 Unicode 字符。里面的h可以写5个

    +：表示匹配前面的表达式重复一次或多次等价于{1，}

    ?表示匹配前面的表达式重复0次或1次相当于{0，1}；但是如果它直接跟在*、+、?、{}这四个量词后面，会改变匹配模式，本来是全部匹配加了?后会变成显示最少的

    .（小数点）它默认匹配除了换行符以外的单个字符，意思就是这里得有个字符，不管是谁得有一个

    （）：捕获括号，它里面要写参数，假设是未知数x，意思是不仅匹配x，而且还记住x。它里面也可以加问号，形成（？：x）这就是匹配但是不记住的写法
    写正则的时候不要加空格哦！

     

     在字面量的写法中，//就类似于数组的[]、对象的{}。推荐使用字面量写法。但是，如果正则表达式是动态生成的或者有变量的情况下，要用构造函数的写法。

    正则表达式可以用来查找匹配

    \ ：反斜杠在正则表达式中有转义功能：特殊字符前加反斜杠表示转义，非特殊字符前的反斜杠表示接下来的是一个字符边界不是字符（虽然写的是普通字符）

    /mmm/：精确匹配mmm的存在

    /mm*m/精确匹配m开头m结尾中间可以有0个或多个m的字符串

    如果你要使用特殊字符的字面值，就是不用特殊字符的功能但是要把它显示出来，直接用肯定是不行，需要你在它前面加一个反斜杠\把它的特殊含义转换成文字意思，注意斜杠，如果你要显示的内容是有多个斜杠存在的，那么每个斜杠前面都要加反斜杠

    ——————————————————————————————————————————————————————————————————————————————————————

    not like a dog，not like a god anymore。

  • 相关阅读:
    Linux Ubuntu安装配置教程
    电力系统强大的Gurobi 求解器的学习（Python&Matlab）
    【c#】Thread多线程项目练习Demo之---摇奖机
    Vue学习：分析hello案例
    C++初阶 List的模拟实现
    终端便捷ssh（免密）连接
    支付宝小程序关键词优化：引领数字商业的未来
    Keeplived练习
    java毕业设计智能分析的简单聚众筹平台Mybatis+系统+数据库+调试部署
    Spring的总结
  • 原文地址：https://blog.csdn.net/chihuomiao/article/details/124951406