1. 什么是DOM？

DOM文档对象模型，以根元素开头展开成一颗树，描述了处理网页内容的方法和接口。最根本对象是document（window.document）。

2. 什么是DOM事件？

举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。

3. 事件捕获

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

在元素中从外向内找监听函数叫做事件捕获
捕获就是由外向内，从第一层 >> 第二层 >> 第三层
看有没有函数监听

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

4.事件冒泡

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

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

5.两者的顺序

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

用哪种顺序？可以通过addEventListener的第三个参数控制

e.addEventLisenter('click',f2,true) // true按捕获方向执行函数

e.addEventLisenter('click',f2,false) // false按冒泡方向执行函数

但有一个特例如果只有一个div被监听(不考虑父子同时被监听) fn分别在捕获和冒泡阶段监听click事件用户点击的元素就是开发者监听的

div.addEventListener('click',fn)
div.addEventListener('click',fn,true)
复制代码

这时就是一个特例，这里谁先监听谁就限制性(冒泡先执行)

6.target 与 currentTarget 区别

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

7.取消冒泡

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

DOM事件模型及DOM事件机制