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))标签：console,log,exec,学习,HarmonyOS,关于,str,var,reg From： https://blog.csdn.net/m0_72035166/article/details/141984395