DOM事件

<div class="爷爷">
     <div clss="父亲">
         <div class="儿子">文字</div>
     </div>
</div>

在爷爷、父亲、儿子上设置监听事件，在点击文字，算点击也有父亲和儿子。那么先调用哪个监听事件？当时的网景公司认为先调用爷爷的监听事件，IE则认为先调用儿子的监听事件。2002年最终W3C制定了标准，规定浏览器都支持两种调用顺序。
首先按爷爷——父亲——儿子的顺序看有没有函数监听，再按儿子——父亲——爷爷的顺序看看有没有函数监听。如果有函数监听则调用并提供事件信息，没有则跳过。
由外向内找监听函数, 叫事件监听.
由内向外找监听函数, 叫事件冒泡.

DOM事件模型分为3个阶段:

1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段(示例代码为: 爷爷->爸爸->儿子)；
2. 目标阶段：真正的目标节点正在处理事件的阶段；(示例代码中: 文字)
3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段(示例代码中为: 儿子->爸爸->爷爷)。

事件绑定

IE5: baba.attachEvent('onclick', fn)//事件冒泡
网景: baba.addEventListener('click', fn)//事件捕获
W3C: baba.addEventListener('click', fn, bool)
如果bool不传或为falsy, 则fn使用事件冒泡, 反之则fn使用事件捕获.
冒泡可以被取消，但是捕获不行。
取消冒泡e.stopPropagation()

targe和current.target的区别

• target是用户操作的元素
• current.target是程序员监听的元素 div>span{文字}用户点击文字
  e.target是span
  e.currentTarget是div

事件委托

例如一个班的孩子都要去书店购买练习册，如果他们自己去买，老板要接待一个班的人，但是如果通知一个班的班长去一起购买，老板就只接待一次。要是班里有人不想买了，班长也能了解到。 （省监听数，节约内存。监听动态元素）