请简述 DOM 事件模型或 DOM 事件机制

<div class='gpapa'>
   <div class='papa'>
      <div>son</div>
   </div>
</div>

捕获

超看有没有监听的顺序或者层次是从外面开始的
gpapa==>papa==>son
网景提出来的

冒泡

son==>papa==>gpapa
微软提出来的

顺序

绑定在被点击元素的事件是按照代码的顺序发生的，其他非绑定的元素则是通过冒泡或者捕获的触发。按照W3C的标准，先发生捕获事件，后发生冒泡事件。
所以事件的整体顺序是：
非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡

事件绑定 API addEventListener

W3C:

baba.addEventListener('click',fn,bool)

如果不传bool值 默认为false，冒泡

如果 bool 值为 true， 捕获

target 与 currentTarget 区别

e.target 用户操作的元素

e.currentTarget 程序员监听的元素

取消冒泡

捕获不能取消，冒泡可以 e.stopPropagation 中断冒泡

事件e

事件e会在事件结束后自动消亡
可以声明一个变量来保存当前事件信息,

捕获与冒泡如何并存

用两个事件分别存放，顺序执行就可以了

事件委托的好处

省监听内存
动态监听，可以监听暂时不存在的元素