DOM事件与事件委托

点击事件

第一部分.概念

<div class=爷爷>
  <div class=爸爸>
    <div class=儿子>文字</div>
  </div>
</div>

给3个div分别添加事件监听fnYe/fnBa/fnEr
提问一：点击了谁？
点击文字，算不算点击儿子？
点击文字，算不算点击爸爸？
点击文字，算不算点击爷爷？
都算
提问二：调用顺序
点击文字，最先调用fnYe/fnBa/fnEr中的哪个函数？
都行
IE5认为先调fnEr，网景认为先调fnYe,然后掐上了，最后闹到了W3C
和事佬W3C
2002年，W3C发布标准，文档名为"DOM Level 2 Events Specification"
规定浏览器应该同时支持两种调用顺序
首先按爷爷=>爸爸=>儿子顺序看有没有函数监听
然后按儿子=>爸爸=>爷爷顺序看有没有函数监听
捕获总是在冒泡前面
这个过程是固定的，只是看中间有没有函数。
有监听函数就调用，并提供事件信息，没有就掉过。

术语
从外向内找监听函数，叫事件捕获
从内向外找监听函数，叫事件冒泡

冒泡是IE创建的事件模型(一般要冒泡)

疑问：那岂不是fnYe/fnBa/fnEr都调用两次?非也！
开发者自己选择把fnYe放在捕获阶段还是冒泡阶段

DOM事件机制图

第二部分.代码实践

addEventListener函数

事件绑定API
IE5*:baba.attachEvent(‘onclick’,fn) //冒泡
网景:baba.addEventListener(‘click’,fn) //捕获
W3C:baba.addEventListener(‘click’,fn,bool)

如果bool不传或为falsy(类似于false的值)
就让fn走冒泡，即当浏览器在冒泡阶段发现baba有fn监听函数，就会调用fn,并提供事件信息
如果bool为true
就让fn走捕获，即当浏览器在捕获阶段发现baba有fn监听函数，就会调用fn,并提供事件信息

注意:走冒泡阶段不是说只走这个阶段。而是说捕获、冒泡这个阶段是一定要走的，只不过是你在哪边执行函数的问题。传false就是把fn放冒泡阶段执行，传true就是把fn放捕获阶段执行。

例子
1.css

div[class^=level] {
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex; 
}

2.e会在事件结束后自动消亡，e只存在于事件点击的那一瞬间。
1秒钟之后就没有这个点击事件了。
e是空的。
保存e 代码：const t=e.currentTarget

let n=1
level1.addEventListener('click',(e)=>{
  //console.log(e) 空的
  const t=e.currentTarget
  setTimeout(()=>{
     t.classList.remove('x')
  },n*1000)
  n +=1
})

3.冒泡过程：
颜色变换顺序，从里到外。默认是冒泡(不加参数)
捕获过程：
颜色变换顺序，