理解DOM事件模型和事件委托的基本概念
一、DOM事件模型/机制
示例代码：
<div class="爷爷">
<div class="爸爸">
<div class="儿子">文字</div>
</div>
</div>
即：.爷爷>.爸爸>.儿子, 给3个div分别添加事件监听fnYe/fnBa/fnEr
即：点击父元素也算点击子元素，相反也一样。
在调用顺序上网景与IE有不同，在“W3C”2002年发布标准后规定浏览器同时支持两种调用顺序。
首先按爷爷>爸爸>儿子顺序看有没有函数监听，然后按儿子>爸爸>爷爷顺序看有没有函数监听。
这2种顺序用专业术语来说分别就是DOM事件模型的事件捕获和事件冒泡。
一个事件发生后，会在子元素和父元素之间传播（propagation）
由外向内找监听函数叫事件捕获；
由内向外找监听函数叫事件冒泡。
事件绑定API addEventListener
IE5：baba.attachEvent(‘onclick’, fn) //事件冒泡
网景：baba.addEventListener(‘click’, fn) //事件捕获
W3C：baba.addEventListener(‘click’, fn, bool) //如果bool不传或为falsy，则fn使用事件冒泡，反之则使用事件捕获。
target 与 currentTarget 区别
e.target 是用户操作的元素，e.currentTarget 是程序员监听的元素。
取消冒泡
捕获不能取消，冒泡可以 e.stopPropagation(), 中断冒泡。
阻止默认动作
使用event.preventDefault()可以取消默认事件。
二、事件委托
原理：DOM元素的事件冒泡
事件委托是JavaScript中常用绑定事件的常用技巧，也叫事件代理(Event Delegation)，顾名思义，“事件委托”是把原本需要绑定在子元素的响应事件(click、keydown...)委托给父元素，让父元素担当事件监听的职务。
事件委托的优点
(1) 可以节省内存占用，减少事件注册（比如在ul上代理所有li的click事件）
如上面代码所示，如果给每个<li>列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将<li>元素的点击事件绑定到它的父元素<ul>身上，执行事件的时候再去匹配判断目标元素。
(2) 可以监听动态元素（监听目前不存在的元素的点击事件）
假设上述的例子中列表项<li>就几个，我们给每个列表项都绑定了事件。
在很多时候，我们需要通过用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。
如果用事件委托就没有这种麻烦，因为事件是绑定在父层，和目标元素的增减没有关系，执行到目标元素是在真正响应执行事件函数的过程中匹配的，所以使用事件在动态绑定事件的情况下可以减少很多重复性的工作。
实现方法：
一、可用addEventListener() //所有主流浏览器，除了IE8及更早IE版本
1.语法：
element.addEventListener(event,function,useCapture)；
event：必须。字符串，指定事件名。 不加'on'，如click
function：必须。指定要事件触发时执行的函数。
useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行(true-事件句柄在捕获阶段执行；false-默认。事件句柄在冒泡阶段执行)。
2.移除事件监听：
element.removeEventListener(event,function,useCapture)。移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。
3.功能：
可多次绑定同一个事件，并且不会覆盖上一个事件。
二、attachEvent() //IE8及IE更早版本
1.语法：
element.attachEvent(event,function)；
（1）event事件加'on'，onClick
（2）没有第三个参数，因为IE只有冒泡，没有反向冒泡
（3）执行顺序按照绑定的反序（先执行后绑定的方法）
2.移除事件监听：
element.detachEvent(event,function)
封装事件委托
<div id="div1"></div>
<script>
setTimeout(()=>{
const button = document.creatElement('button')
button.textContent = 'click 1'
div1.appendChild(button)
},1000)
on('click','#div1','button',()=>{
console.log('button被点击了')
})
function on(eventType, element, selector, fn){
//判断如果element不是元素
if(!(element instanceof Element)){
element = document.querySelector(element)
}
element.addEventListener(eventType,(e)=>{
const t = e.target
//matches判断一个元素是否满足一个选择器
if(t.matches(selector)){
fn(e)
}
})
}
</script>