DOM 事件模型/ DOM 事件机制

1. 请描述：什么是捕获，什么是冒泡
2. 并说一下是先捕获还是先冒泡

  <div class="第一层">
    <div class="第二层">
      <div class="第三层">
        点击此处
      </div>
    </div>
  </div>

示意图

捕获

捕获就是由外向内，从第一层 >> 第二层 >> 第三层
看有没有函数监听

这个是由网景公司提出的：事件有父元素传递到子元素的过程就叫捕获

冒泡

冒泡就是由内向外，从第三层 >> 第二层 >> 第一层
看有没有函数监听

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

两者的顺序

W3C标准：首先捕获，再冒泡
绑定在第三层的事件是按照代码的顺序发生的，其他非第三层<div>元素则是通过冒泡或者捕获的触发。
按照W3C的标准，先发生捕获事件，后发生冒泡事件。
所以事件的整体顺序是：
捕获 第一层<div> >> 捕获第二层<div> >> 捕获第三层<div> >> 第二层<div>冒泡 -> 第一层<div>冒泡

事件绑定

addEventListener('click', fn, boolean)

boolean 值在此处是默认为 false (冒泡)
如果是 true 则为捕获

e.target 和e.currentTarget区别

• target为 用户操作的元素
• currentTarget 监听的元素

事件的取消

• 捕获是不能取消的
• 冒泡可以阻止 e.stopPropagation

事件委托

事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。

优点

1. 节约监听数量
2. 可以监听动态生成的元素