简述 DOM 事件模型或 DOM 事件机制捕获捕获从爷爷 => 爸爸 => 儿子看有没有函数监听由外向内找监听函

<div class='爷爷'>
    <div class='爸爸'>
        <div class='儿子'>文字</div>
    </div>
</div>

捕获

捕获从爷爷 => 爸爸 => 儿子看有没有函数监听

由外向内找监听函数, 叫事件监听

冒泡

冒泡从儿子 => 爸爸 => 爷爷看有没有函数监听

由内向外找监听函数, 叫事件冒泡

冒泡事件

微软提出的事件由子元素传递到父元素的过程，叫做冒泡

捕获事件

网景提出的事件由父元素到子元素传递的过程，叫做捕获

捕获与冒泡

W3C标准首先捕获，再冒泡

其中文字(示例代码中)就是事件监听和事件冒泡的目标.因此DOM事件模型分为3个阶段:

（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段(示例代码中简化为: 爷爷->爸爸->儿子)；

（2）目标阶段：真正的目标节点正在处理事件的阶段；(示例代码中: 文字)

（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段(示例代码中简化为: 儿子->爸爸->爷爷)。

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

事件绑定 API addEventListener

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

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

如果 bool 值为 true，捕获

target 与 currentTarget 区别

e.target 用户操作的元素
e.currentTarget 程序员监听的元素

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