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/ivar 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))