DOM事件机制 | 事件委托

DOM

document object model文档对象模型，将网页和脚本与及其他的编程语言联系了起来。

DOM事件

事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。

也就是说，DOM事件里包括了浏览器内部事件和浏览器与用户交互的事件。常见的类型有资源事件|网络事件|焦点事件|CSS动画事件|表单事件|键盘事件|鼠标事件等。

JavaScript本身并不支持事件，只是其调用的DOM所提供的addEventListenter()提供了支持。

DOM事件模型

DOM事件模型分别为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播，依次为捕获阶段、目标阶段、冒泡阶段。

也就是说，当某个类型的事件A发生后，DOM会以--从Window对象开始依次降级，找到目标DOM对象，再从目标对象依次升级至Window--这样一个顺序，寻找各级的该事件(事件A)的事件监听。

有时候我们希望可以控制某事件（例如click）监听函数在捕获/冒泡两个阶段中的某一个阶段执行（即使选定了事件模型，DOM事件流依然会走一遍，毕竟事件流里可能还有其他监听了该事件的对象），可以通过如下方式设置

dom.addEventLisenter('click',f2,true) // true:在捕获阶段执行函数

dom.addEventLisenter('click',f2[,false]) // false（默认值）:在冒泡阶段执行函数

阻止冒泡

事件流的捕获阶段不可阻止，但是冒泡阶段可以通过代码中断（即之后上级的元素将监听不到该类型事件）

e.stopPropagation() 

事件委托

事件委托就是监听目标事件的祖先元素，判断被点击的元素是否是我们想监听的元素，若是，则执行函数。 其优点是节省内存以及可以监听动态生成的元素

element.addEventListener(event,(e)=>{
     t = e.target  //用户操作的元素
     if (t.tagName.toLowercase() === selector){ //selector是目标标签名
         fn(e)
     }
})