DOM事件

DOM事件级别

DOM事件分为3个级别：DOM 0级事件处理、DOM 2级事件处理和DOM 3级事件处理

DOM 0级事件

给元素的事件行为绑定方法，在当前元素事件行为的冒泡阶段执行
element.on+事件类型 = js code

<div id="demo">点击</div>var div = document.getELementById("demo")
div.onclick = function() {console.log("元素被点击了")
}

从某种角度上来说，给元素的事件行为其实是给这个DOM对象的属性进行赋值，所以DOM 0级事件是不能绑定多个方法的，因为后面再去绑定会覆盖前面已经绑定过的，同理，如果要是需要取消这个事件，只能通过给这个属性赋空值的手段来达到目的

DOM 2级事件

DOM 2级事件在DOM 0级事件基础上进行了优化，允许绑定多个处理函数，也可任意移除某个处理函数

<button id="btn">点击</button>var btn = document.getELementById("btn")
btn.addEventListener("click", function() {console.log("点击了")
}, false)

addEventListener方法参数的具体介绍：MDN

可以通过removeEventListener解绑事件
注：对于IE8以下的版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现

// 只支持冒泡型事件，所以只需传两个参数
btn.attachEvent('onclick', fn); // 绑定事件 
btn.detachEvent('onclick', fn); // 解绑事件 

DOM 3级事件

DOM 3级事件在DOM 2级事件的基础上新增了更多的事件类型，比如

1. UI事件，如：load、scroll
2. 焦点事件，如：blur、focus
3. 鼠标事件，如：dbclick、mouseup
4. 键盘事件，如：keydown、keypress

DOM 3级事件还支持自定义事件

事件代理（事件委托）

1. 什么是事件代理

事件代理就是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件

2. 优点

• 减少内存消耗，提高性能
  比如有这样一个场景，在一个ul li的列表里，我点击一个列表，就会执行弹出这个列表的信息。如果我们给每一个li都绑定一个函数，比如

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>let Lis = document.getElementsByTagName("li")
for(let i = 0; i < Lis.length; i++) {Lis[i].onclick = function() {alert(Lis[i].innerText)}
}

这种方式对内存消耗是很大的，如果我们只给ul绑定一个函数，当点击li时，会根据冒泡机制向上传递，触发ul的事件，我们通过获取事件源就知道是哪个元素被点击了，这样对内存的消耗就变低了

• 动态绑定事件
  在大部分的场景中，列表都是通过获取后台数据渲染而成的，那么当新增列表时，需要去重新绑定事件，如果列表元素被删除，又要去解绑对应的函数，这个过程是很复杂的，如果用事件代理就会减少很多工作量

3. 实现

<ul id="el"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>var ul = document.getElementById("el")
ul.onclick = function (e) {if (e.target.tagName === 'LI') {console.log(e.target.innerText)}
}

event对象的属性和方法

1. event.preventDefault()

调用这个方法，默认事件行为将不再触发

比如阻止点击a标签的页面跳转行为

<a id="a" href="http://www.baidu.com">链接</a>
a.onclick = function (e) {console.log("a标签被点击了")e.preventDefault()
}

2. event.stopPropagation()

可以阻止事件冒泡到父元素

<div id="parent"><div id="child"></div>
</div>
<script>parent.addEventListener('click', function () {console.log("parent")}, false)child.addEventListener("click", function (e) {console.log("child")e.stopPropagation()}, false)
</script>

3. event.stopImmediatePropagation()

既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发

<div id="parent"><div id="child"></div>
</div>
<script>parent.addEventListener('click', function () {console.log("parent")}, false)child.addEventListener("click", function (e) {console.log("child")e.stopImmediatePropagation()}, false)child.addEventListener("click", function() {console.log("第二个click事件被触发")})
</script>

4. event.target 和 event.currentTarget

event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素。

定时器和计时器(延时器)

定时器(setInterval())：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
计时器(setTimeout()) ：在指定的毫秒数后调用函数或计算表达式。
可以通过clearInterval和clearTimeout来清除

正则表达式

正则表达式是可以用于匹配字符串和字符组合的文本模式

1. 创建一个正则表达式

• 通过字面量创建

var reg = /abc/
var str = "aerabcdr ab c"
console.log(reg.test(str))

• 利用构造函数创建

var reg = new RegExp("abc")
var str = "aerabcdr ab c"
console.log(reg.test(str))

2. 正则表达式标志

标志	描述
g	全局搜索
i	不区分大小写搜索
m	多行搜索

var reg = /a/g
var reg = /a/i
var reg = /a/m

3. 常用方法

1.test()

规则：正则表达式搜索字符串指定的值，从而去匹配字符串。如果匹配成功就返回 true，如果匹配失败就返回 false。
用法：正则.test(字符串)

2. exec()

规则：该函数通过对指定你的字符串进行一次匹配检测，获取字符串中的第一个与正则表达式的内容，并且将匹配的内容和子匹配的结果存放在返回数组中
用法：正则.exec(字符串)

var reg=/hello/;
console.log(reg.exec('hellojs'));
console.log(reg.exec('javascript'));

3. match()

规则：正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成，就返回 null
用法：字符串.match(正则)

var str = "12379asdf34sdf2df"
var reg = /f/g
console.log(str.match(reg))

4. replace()

规则：正则去匹配字符串，匹配成功的字符串去替换成新的字符串。函数的第一个参数，是匹配成功的字符；第二个参数：可以是字符串，也可以是一个回调函数。
用法：字符串.replace(正则,新的字符串)

var str = "13adf45"
var reg = /adf/g
str = str.replace(reg, '*')
console.log(str)

5. search()

规则：正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回 -1
用法：字符串.search(正则)

var str = "abaddade"
var reg1 = /b/
var reg2 = /e/
console.log(str.search(reg1)
console.log(str.search(reg2)

4. 精确匹配和模糊匹配

在前面我们已经知道了怎么创建正则表达式和基本的使用方法，但是这并没有体现正则表达式的魅力，我们可以使用String.indexOf()来达到同样的目的。这里我就要说到精确匹配和模糊匹配，在刚刚的例子种就是一种精确匹配，那么什么是模糊匹配呢？先抛出一个问题，我们怎么去判断字符串中是否有数字，是否有字母等等。先来认识以下元字符

5. 元字符

字符	描述
\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符
^	匹配输入字符串的开始位置
$	匹配输入字符串的结束位置
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
?	将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符
{n}	将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符
{n, }	n 是一个非负整数。至少匹配n 次
{n, m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次
？	当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串
\d	匹配一个数字字符
\D	匹配一个非数字字符
\s	匹配任何空白字符，包括空格、制表符、换页符等等
\w	匹配字母、数字、下划线
\b	匹配一个单词边界，也就是指单词和空格间的位置
\B	匹配非单词边界
.	匹配除 \n 之外的任何单个字符。. 是一个很强大的 元符号，请慎用。
x|y	匹配 x 或 y
[ xyz ]	字符集合。匹配所包含的任意一个字符
[ ^xyz ]	负值字符集合。匹配未包含的任意字符
[a-z]	字符范围。匹配指定范围内的任意字符
[ ^a-z ]	负值字符范围。匹配任何不在指定范围内的任意字符
(pattern)	匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到
(?:pattern)	匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用
(?=pattern)	正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用
(?!pattern)	正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用
(?<=pattern)	反向(look behind)肯定预查，与正向肯定预查类似，只是方向相反
(?<!pattern)	反向否定预查，与正向否定预查类似，只是方向相反