DOM事件模型
DOM，全称为Document Object Model，文档对象模型。
DOM是一棵树，它的事件模型也是基于这棵树。
冒泡型事件模型（bubbing）
如上图所示，冒泡型事件处理模型在事件发生时，首先在最精确的元素上触发，然后向上传播，直到根节点。反映到DOM树上就是事件从叶子节点传播到根节点。
捕获型事件模型（capture）
相反地，捕获型在事件发生时首先在最顶级的元素上触发，传播到最低级的元素上。在DOM树上的表现就是由根节点传播到叶子节点。
顺序为先捕获，后冒泡。
标准的DOM事件处理模型
标准的事件处理模型分为三个阶段：
- 父元素中所有的捕捉型事件（如果有）自上而下地执行
- 目标元素的冒泡型事件（如果有）
- 父元素中所有的冒泡型事件（如果有）自下而上地执行
事件委托
对于很多要监听的子元素，可以将它们的事件委托在这些子元素的父元素或者是更外层的父元素上。如对于很多父元素为div1元素的button元素，做到监听每个的冒泡事件太耗内存，这时转而监听它们共同的父元素div1，通过冒泡事件的触发来找到发生事件的button元素。
div1.addEventListener('click',(e)=>{ //委托给父元素监听
const t = e.target
if(t.tagName.toLowerCase()=== 'button'){ //在HTML中api ：.tagName会返回一个大写的标签
console.log('')
}
})
好处是：1 节约监听数量 2 可以监听动态生成的元素。
