事件捕获与事件冒泡
本文所说的DOM事件模型是指的DOM level 2模型（W3C标准模型），现代浏览器都支持该模型。在该事件模型中，一次事件共有三个过程：
- 事件捕获阶段（Capturing Phase）：事件从
document节点到触发事件的节点（从外向内）找监听函数。 - 事件处理阶段（Target Phase）：事件到达触发事件的节点，触发该节点的监听函数。
- 事件冒泡阶段（Bubbling Phase）：事件从触发事件的节点到
document节点（从内向外）找监听函数。 以上过程又称事件流，如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<style media="screen">
#div {
width: 300px;
height: 100px;
background: blue;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="div">
点击目标元素触发事件
</div>
<script type="text/javascript">
var div = document.querySelector('#div')
//捕获阶段事件函数
const f1 = function (e) {
console.log('捕获Captrue ' + this.toString().replace("object ", "").replace("[", "").replace("]", "").replace("HTML", "").replace("Element", ""));
}
//冒泡阶段事件函数
const f2 = function (e) {
console.log('冒泡Bubbling ' + this.toString().replace("object ", "").replace("[", "").replace("]", "").replace("HTML", "").replace("Element", ""));
}
//捕获阶段监听函数
div.addEventListener('click', f1, true);//目标元素监听函数
window.addEventListener('click', f1, true); //window节点监听函数
document.addEventListener('click', f1, true); //document节点监听函数
document.documentElement.addEventListener('click', f1, true); //html节点监听函数
document.body.addEventListener('click', f1, true); //body节点监听函数
//冒泡阶段监听函数
div.addEventListener('click', f2); //目标元素监听函数
window.addEventListener('click', f2); //window节点监听函数
document.addEventListener('click', f2); //document节点监听函数
document.documentElement.addEventListener('click', f2); //html节点监听函数
document.body.addEventListener('click', f2); //body节点监听函数
</script>
</body>
</html>
运行结果：结合上文事件流图片可以很清晰的看到DOM事件流执行的顺序
事件监听函数
addEventListener()：用于添加事件监听
element.addEventListener(eventType, function, useCapture);
removeEventListener()：用于移除事件监听
element.addEventListener(eventType, function, useCapture);
-
第一个参数是事件的类型 (如 "click" 或 "mousedown").
-
第二个参数是事件触发后调用的函数。
-
第三个参数是个布尔值用于描述事件是冒泡还是捕获。true是捕获，false是冒泡，默认是false冒泡。
Event对象常用属性与方法
event对象是指触发事件时执行回调函数的传入参数，event对象表示事件的状态（比如鼠标的位置、键盘的键值等），event对象的方法是有很多的，像鼠标位置键盘key值的这样的就不多说了，下面介绍几个我认为比较重要的。
event.preventDefault()
此方法用来阻止默认的事件，比如阻止a标签的跳转。用法：
a.addEventListenner('click',function(event){
event.preventDefault();
})
event.stopPropagation()
此方法用来阻止冒泡，让事件停留在当前元素而不会向上传递。
dom.addEventListenner('click',function(event){
event.stopPropagation();
})
-
event.target
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 -
event.currentTarget
currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
event.target与event.currentTarget的区别：
- event.target始终指向事件发生时的元素
- event.currentTarget指向事件所监听的元素
