DOM事件与事件委托

当有如下代码：

<div class="grandfather">
  <div class="father">
    <div class="son">
      文字
    </div>
  </div>
</div>

此时点击'文字' 两个字时，同时也相当于点击了三个div，那么，如果此时的三个div都有点击事件，那么先触发谁，执行谁呢？

DOM事件机制的捕获阶段和冒泡阶段

从外到内找监听函数，叫事件捕获

从内到外找监听函数，叫事件冒泡

因此，上述点击的操作，依次从 .grandfather 到 .father 再到 .son 叫事件捕获，从.son 到 .father 再到 .grandfather 叫事件冒泡

因此我们可以选择在捕获或者冒泡阶段添加监听函数

div.addEventListener(eventType, function(), bool)

其中第三个参数不填或者填falsey值时则为在冒泡阶段添加监听事件

如果填true，则是在捕获阶段添加监听事件

取消冒泡：

在某个元素添加监听函数时通过 stopPropagation()可以阻止冒泡

target和currentTarget区别

.target 用户正在操作的元素

.currentTarget 程序员在监听的元素

事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

适用于要监听的元素数据多或者元素会发生改变

例如要监听某个div下的全部20个button的点击事件

或者监听在用户点击后才会生成的某个页面元素

此时无法对该元素直接监听（元素会改变）或者会占用浏览器资源（监听数量庞大），我们可以对他的父级页面元素监听