1：事件流
事件流描述的是从页面中接收事件的顺序,事件流包括下面几个阶段。
- 事件捕获阶段 : 事件从最上一级标签开始往下查找，直到捕获到事件目标(target)
- 目标阶段
- 事件冒泡阶段: 事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
2：addEventListener
addEventListener(type,listener,useCapture)
type: 必须,String类型,事件类型
listener: 必须,函数体或者JS方法
useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认事件发生在冒泡阶段，useCapture为false
3：事件委托：
3.1:原理
即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
3.2：事件委托的优点:
- 【1】可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒
- 【2】动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
3.3：事件委托注意事项：
使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失
3.4：示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>捕获 目标 冒泡</title>
</head>
<body>
<div id="parent" style="width:200px;height: 200px;background: blue;">
<div id="son1" style="width:100px;height: 100px;background:red;">222</div>
<div id="son2" style="width:100px;height:100px;background: yellow;">333</div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent")
// var son1 = document.getElementById("son1")
// var son2 = document.getElementById("son2")
parent.addEventListener("click", function (e) {
alert(1)
}, true)
son1.addEventListener("click", function (e) {
alert(2)
// e.stopPropagation();
}, false)
son2.addEventListener("click", function (e) {
alert(3)
}, true)
</script>
</body>
</html>
例子解析: 虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件。
写在后面，本文依据网上的学习总结而来，侵删
