持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
一、事件和事件模型
事件是用户操作网页时发生的交互动作，比如 click、move，或是文档加载，窗口滚动和大小调整等
分类：
3种事件模型：
-
DOM0 级事件模型
直接在 dom 对象上注册事件名称
-
IE 事件模型
事件处理阶段
事件冒泡阶段
-
DOM2 级事件模型
-
事件捕获阶段（自顶向下）
事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，有则执行
-
事件处理阶段
-
事件冒泡阶段（自底向上）
从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，有则执行
-
二、实现（addEventListener的第三个参数）
事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。
以<p>标签为例，元素上发生click事件的顺序是document -> html -> body -> div -> p
// 捕获阶段
第三个参数为true window.addEventListener('click',()=>{ },true)
元素上发生click事件的顺序：p -> div -> body -> html -> document
// 冒泡阶段
第三个参数不传参默认为false window.addEventListener('click',()=>{ })
三、应用（事件委托）
事件委托（也可以叫事件代理 Event Delegation） ，把原本需要绑定在子元素的事件委托给父元素。比如当需要批量监听元素时，选择在在父元素绑定事件。
在上面我们已经了解了事件传播的三个阶段，事件委托的原理就是冒泡
优点：
- 可以减少事件注册，节省内存
- 新增子节点时，无需再次绑定
四、总结
- 先捕获再冒泡
- addEventListener有三个参数。第三个参数默认值是false，冒泡阶段调用事件;如果参数为true，在捕获阶段调用事件
- 给一个dom同时绑定两个点击事件，一个捕获，一个冒泡，一共会执行几次事件? addEventListener绑定几次就执行几次
- 事件委托是冒泡的应用
