关于HarmonyOS的学习

day24

一、事件流

        + 称之为DOM事件流，因为是事件肯定是绑定给DOM元素的
        + 咱们在页面里面给元素注册（绑定）了事件，那么事件和事件之间会进行传递，而事件传递是由规则的，把这个规则称之为事件流
        + 完整事件流
          => 捕获阶段 --- 事件在传递的时候，从外面向里面进行传递（祖先元素给后代元素）
          => 目标阶段 --- 最终事件在哪里执行
          => 冒泡阶段 --- 事件在传递的时候，从里面向外面进行传递（后代元素给祖先元素）
        + 其实在使用的过程中，不可能一次性出现三次阶段
        + 注意点
          => 事件流的传递（传播）只能在相同的事件之间
          => 事件流的传递是存在于元素与祖先元素之间，兄弟之间不能进行传递

二、事件监听

给元素绑定事件，可以给一个元素绑定相同的多个事件，可以看到捕获阶段。需要使用方法，兼容性没有那么好 addEventListener('事件名称，不要加on', '回调函数', '捕获或者冒泡，默认冒泡 --- false') removeEventListener('事件名称，不要加on', '回调函数', '捕获或者冒泡，默认冒泡 --- false')，移除事件，必须回调函数是有名称，匿名函数无法移除

三、事件委派

    // var aLi = $('ul li', true)
​
    var ul = $('ul')
​
    // 问题1：新创建的标记无法添加上事件的，因为获取元素和绑定事件在前面，而创建标记在后面，因此绑定不上事件
    // 问题2：相同的事件绑定次数太多了
    // 解决方案：使用事件委派（事件委托）
​
    // 绑定事件
    // for(var i=0; i<aLi.length; i++){
    //     aLi[i].onclick = function(){
    //         alert('hello')
    //     }
    // }
​
    // 遍历动态创建新的li出来
    for(var j=0; j<5; j++){
        var li = document.createElement('li')
        li.innerHTML = '大家好，我是新来的'
        ul.appendChild(li)
    }
    
    // 事件委托：如果遇到需要绑定相同事件的元素，可以把事件绑定到这些元素共同的祖先元素上面，然后利于事件冒泡的原理实现事件委派
    // 事件冒泡规则：从里面向外面进行事件传递，咱们点击的是子元素，但是子元素上面没有点击事件，会把点击事件传递给父元素，发现父元素上面有点击事件，那么就直接执行了
    // e.target 事件目标对象，这个对象就可以让咱们知道点击是哪个目标元素（目标对象）
    // 兼容写法：var target = e.target || e.srcElement（IE）
    // 事件委派优点：优化代码，减少对DOM的操作，节省性能
    ul.onclick = function(e){
        var t = e.target
        // if(t.nodeName === 'LI'){
        //     alert('hello')
        // }
​
        if(t.id === 'li1'){
            alert('哈哈')
        }
        if(t.className === 'li3'){
            alert('嘿嘿')
        }
    }

四、正则

1.正则介绍

    // 如：从杂乱的字符串中找数字
    // var str = "asd68asd687as6da78sd123123zcacas"
    // var arr = []
    // for(var i=0; i<str.length; i++){
    //     if(str[i]>=0 && str[i]<=9){
    //         arr.push(str[i])
    //     }
    // }
    // console.log(arr)
    // 使用正则
    var str = "asd68asd687as6da78sd123123zcacas"
    // match()字符串方法，可以根据填写正则返回一个数组
    // \d 表示的是0-9之间的数字，属于转义字符
    var arr = str.match(/\d/g)
    console.log(arr)

2.正则创建

    /*
        正则
        + 正则描述的是字符规则，这个规则是由你制定
        + 创建方式
          => new RegExp() 构造函数
             -> 参数1表示要验证的字符
             -> 参数2表示的是修饰符
          => /验证的字符/修饰符 字面量
        + 修饰符
          => g全局匹配
          => i忽略大小写
        + 正则方法
          => test() 如果有满足规则的返回true，没有返回false（常用）
          => exec() 捕获，可以把满足规则的字符放在一个数组里面返回，和字符串的match()是类似的。如果没有找到就返回的是null
        + 字符串方法
          => match()
          => search()
          => replace()
          => ...
        + 注意点
          => 字符串的方法其实和正则可以配合使用，因为正则验证的就是字符串的规则
    */
    // 表示创建了一个验证字符串里面是否有a这个字符的规则
    // 构造函数
    // var reg = new RegExp('a', 'i')
    // var str = 'A'
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
    // 字面量
    var reg = /a/i
    var str = 'A'
    console.log(reg.test(str))
    console.log(reg.exec(str))

3.正则量词

    /*
        正则量词
        + 其实就是限定字符出现的数量，也叫做限定符
        + 量词
          => {n} 整好出现n次
          => {n,} 最少出现n次，多的没有限定
          => {n,m} 最少出现n词，最多出现m次
        + 开头和结尾
          => ^ 开头，规定以那个字符开头
          => $ 结尾，规定以那个字符结尾
        + 正则模式
          => 惰性模式，找到了就不会再找了，默认只找一个（默认模式）
          => 贪婪模式，尽可能多的去查找
    */
    // var str = 'aa'
    // 注意点：默认只验证一个字符a
    // var reg = /^a$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // 表示只能出现两个a字符，不能出现比两个多的
    // var str = 'aa'
    // var reg = /^a{2}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // 表示的是不是出现两个ab字符，而是以a开头，出现两个b字符，并以b结尾
    // var str = 'abb'
    // var reg = /^ab{2}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // ()可以进行分组，表示的是ab出现两次
    // var str = 'abab'
    // var reg = /^(ab){2}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // 表示最少出现两个a字符，多的不限定
    // var str = 'aaaaaaa'
    // var reg = /^a{2,}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // 表示最少出现两个a字符，最多可以出现5个a字符
    // var str = 'aaaaaa'
    // var reg = /^a{2,5}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // *表示允许的次数是0 至 正无穷次，有没有都行
    // var str = 'a'
    // var reg = /^a*$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // +表示允许的次数是1 至 正无穷次，至少有一个
    // var str = 'a'
    // var reg = /^a+$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // ? 表示允许的次数是0至1，最多出现1次 
    // var str = 'a'
    // var reg = /^a?$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))

4.正则表达式

    // [] 表示的是一个表达式，可以在这个里面写字符，字符和字符之间是或的关系，也可以规范范围
    // var str = 'z'
    // var reg = /a|b|c/
    // var reg = /[a-c]/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
    
    // var str = 'a'
    // var reg = /[a-d0-6]/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    var str = 'ab6'
    // 表示以a字符开头，后面的b-d字符必须有两个
    var reg = /^a[b-d0-6]{2}$/
    console.log(reg.test(str))
    console.log(reg.exec(str))

5.正则元字符 /* 转义字符： \d —— [0-9] 数字 \w —— [A-z0-9_] 数字，字母，下划线 \s —— 空白字符 \b -- 匹配单词边界

        \D    ——    [^0-9]        非数字
        \W    ——    [^a-z0-9_]    非数字，字母，下划线
        \S    ——    非空白字符
​
        . 表示任意字符
    */
    // var str = '132'
    // var reg = /^1\d{2}$/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = '_'
    // var reg = /\w/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = ' '
    // var reg = /\s/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = 'hello'
    // var reg = /\bhello\b/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = '1'
    // var reg = /\D/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = 'a'
    // ^如果放在[]外面表示以那个字符开头，如果放在里面表示排除或者理解为非
    // var reg = /[^0-9]/
    // console.log(reg.test(str))
    // console.log(reg.exec(str))
​
    // var str = ' '
    // var str = 'a'
    // var str = '6'
    // var str = '.'
    // 注意点1：如果只需要验证的是点的话，那么使用转义字符
    // var reg = /./
​
    // var str = 'a'
    // var reg = /\./
    // console.log(reg.test(str))
    // console.log(reg.exec(str))

    // 注意点2：不能验证换行符的
    // var str = '\n'
    // var reg = /./
    // console.log(reg.test(str))
    // console.log(reg.exec(str))