DOM事件模型
首先，啥是DOM事件？他是文档或浏览器发生的一些交互瞬间。
比如说，click就是一个事件，可以绑定触发后要执行的函数功能。事件可以在document的任何部分被触发。触发者既可以是用户也可以是浏览器。
DOM事件模型
是用来解释元素有绑定函数执行顺序的，也可以理解为事件阶段。
🌰：
<div class="parent">
<div class="child">
文字
</div>
</div>
假如我的parent div和child div上又都有click事件的监听函数。
我点击了“文字”，会触发他们的监听函数吗？那必然会。因为你点击“文字”的同时，你还点击了包含他的所有父元素。
关键就在于，他的父元素不止一个，那应该以什么顺序执行他们的监听函数呢？先执行parent的？还是先执行child的？
以此作为区分，我们认识捕获和冒泡两种模型。
事件捕获（从外向内）
简单理解就是从外层向内层的顺序找监听函数
事件冒泡（从内向外）
简单理解就是从内层向外层的顺序找监听函数
各浏览器大战那会，IE5使用冒泡，网景使用捕获，这对于开发者是很头疼的，最后w3c给出的标准是开发者自己选择监听函数放在捕获阶段还是冒泡。
//w3c
浏览器应该同时支持两种调用顺序
1.首先按捕获的顺序看有没有函数监听
2.再按冒泡的顺序看有没有函数监听
//也不是要执行两遍的意思，开发者自己选择把函数放在捕获阶段还是监听阶段
事件绑定API
ie5 : xx.attachEvent('onclick',fn)
网景：xx.addEventListener('click',fn)
w3c：xx.addEventListener('click',fn,bool)
//bool不传或者falsy 就走冒泡（ie）
ps：如果操作的元素就是监听的元素（父子不同时被监听），且又有冒泡又有捕获，谁先监听谁先执行，不用按捕获-冒泡的顺序
实践小知识点
target vs currentTarget
e.target:这是用户操作的元素
（this）e.currentTarget:监听的元素
阻止冒泡（捕获不可取消，所有冒泡均可取消）
e.stopPropagation()
**阻止默认事件
**
e.preventDefault()
Bubbles /Cancelable
在mdn里搜索指定事件时，比如scroll event,可以看到该事件的这两个值。
Bubbles表示该事件能不能进行冒泡。
Cancelable表示是默认动作能不能取消（而不是冒泡能不能取消）
事件委托
啥是事件委托？简单讲就是委托一个元素监听我本该监听的东西。
什么情况下我需要事件委托呢？就是你监听那个元素本身不方便的时候。
比如说要监听一个div里的100个按钮，那给每个按钮都加监听就显得很蠢。我们委托div去监听。
比如说一个元素你要延时去创建再触发。那一开始的时候它都没这个元素监听个鬼？所以就监听它将被apendChild的那个元素就好啦。
