点击事件
<div class="爷爷">
<div class="爸爸">
<div class="儿子">
文字
</div>
</div>
</div>
给三个div分别添加事件监听fnYe, fnBa, fnEr
提问：点击了谁
- 点击文字，算不算点击儿子？
- 点击文字，算不算点击爸爸？
- 点击文字，算不算点击爷爷？
- 答：都算
提问：点击文字，最先调用fnYe, fnBa, fnEr的哪一个？
- 都行，分为捕获机制和冒泡机制
- 从外到内找监听函数，先调用fnYe，叫事件捕获
- 就从内到外找监听函数，先调用fnEr，叫时间冒泡
DOM事件机制
分为事件捕获和事件冒泡
什么是捕获和冒泡
事件捕获与冒泡.png
当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的做DOM事件流
元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
冒泡事件：微软提出的 事件由子元素传递到父元素的过程，叫做事件冒泡
捕获事件：网景提出的 事件由父元素到子元素传递的过程，叫做事件捕获
-
我们在使用addEventListener监听事件时，addEventListener('click', fn, bool)
- 如果第三个参数bool 不传，或者传false, 那么我们会在冒泡阶段调用fn
- 如果第三个参数Bool传值为true, 那么我们会在捕获阶段调用fn
捕获不可以取消，但是冒泡可以取消，例如e.propagation()
但是有一些事件不可以取消冒泡，比如scroll
target 和 currentTarget
- e.target 用户正在操作的元素
- e.currentTarget 程序员在监听的元素
<div>
<span>文字</span>
</div>
假设我们监听的是div, 但用户实际点击的是文字，那么
- e.target就是span标签
- e.currentTarget就是div标签
事件委托
- 事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
- 通俗地说，就是监听一个父元素节点（包括爸爸节点，爷爷节点等）来同时处理多个子节点
使用场景
- 问：要给100个按钮添加点击事件，怎么办？
- 答：监听这100个按钮的父元素，等冒泡的时候判断target是不是这100个按钮中的一个
- 问：要监听目前不存在的元素的点击事件，咋办？
- 答：监听父元素，等点击的时候看看是不是我想要监听的元素
