简述 DOM 事件模型及DOM 事件机制

捕获

<div class='爷爷'>
    <div class='爸爸'>
        <div class='儿子'></div>
    </div>
</div>
复制代码

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

冒泡

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

冒泡事件

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

捕获事件

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

捕获与冒泡

W3C标准 首先 捕获 ，再冒泡

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

事件绑定 API addEventListener

W3C: baba.addEventListener('click',fn,bool)
复制代码

若是不传bool值 默认为false，冒泡

若是 bool 值为 true， 捕获

target 与 currentTarget 区别

e.target 用户操做的元素
e.currentTarget 程序员监听的元素
复制代码

取消冒泡

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