我们先来看以下代码

  1. <div>
  2.   <div>
  3.     <div>
  4.     文字
  5.     </div>
  6.   </div>
  7. </div>

上面代码即爷爷>爸爸>儿子，然后给三个div分别添加监听事件。如果我点击了文字算是点击了儿子还是爸爸还是爷爷呢？如果我点击文字，最先调用哪个函数呢？我们引入DOM事件模型来解决以上两个疑问

捕获与冒泡

W3C规定浏览器应该同事支持两种调用顺序
首先按爷爷=>爸爸=>儿子顺序看有没有函数监听—-从外向内找监听函数，叫事件捕获
然后按儿子=>爸爸=>爷爷顺序看有没有函数监听—-从内向外找监听函数，叫事件冒泡
又监听函数就调用，并提供事件信息，没有就跳过
image.png
注意：是先从外到内找监听函数再从内到外找监听函数，也就是说如果捕获和冒泡同时存在，先捕获再冒泡

代码实现（事件绑定API）

  1. xxx.addEventListener('click',fn,bool)

如果bool不传或者为falsy，就让fn冒泡，即当浏览器在冒泡阶段发现xxx由fn监听函数，就会调用fn，并提供事件信息
如果bool为true，就让fn走捕获，即当浏览器在捕获阶段发现xxx有fn监听函数，就会调用fn，并提供事件信息

DOM事件级别

DOM事件级别其实就是一些制定的标准：有0,2,3三种标准。
—-0级就是用onclick来绑定事件，也没有自定义事件啥的。事件会被覆盖。
—-到了2级可以开始有多个事件，还支持事件的冒泡和捕获的设置。【false是冒泡，true是捕获】addeventListener(event,listener,useCaptrue) IE11以下：attachEvent(event,listener)
—-到了3级，多了一些事件类型能够绑定。还多了自定义事件。【这一块主要能和事件的绑定，冒泡，捕获结合起来】
总结：
0级只能定义一个事件，多事件会互相覆盖。

1级的dom没有关于事件的更新

2级多出了事件的自定义，并且还有事件冒泡和捕获。注意ie11以下的写法

注意，IE事件处理程序没有第三个参数，因为IE早期版本只支持事件冒泡，所以默认就是事件冒泡。

3级多了自定义事件，和一起其他扩展的事件。