DOM事件与事件委托

DOM 事件流

浏览器在当前页面与用户做交互的过程，比如说点击了鼠标左键，这个事件是怎么传到页面上，这个就是事件流。事件流是指从页面中接收事件的顺序：

• 捕获阶段：浏览器先检查元素的最外层祖先，查找是否有对应的监听函数(onclick事件处理程序)，如果是则运行它，如果不是则继续向里找，执行相同的操做，直至到达实际点击的元素。
• 冒泡阶段：浏览器首先检查被点击的元素，看是否有监听函数(onclick事件处理程序)。如果没有就向上移动到parentNode继续寻找，直至找到监听函数并运行。
• W3C事件模型：先捕获再冒泡。
  注意：e对象被传给所有的监听函数，事件结束后，原本的e对象就不存在了。所以在事件结束后不推荐继续使用e，因为e会被浏览器悄悄改变，要用的话应该提前把属性复制到自己的变量里。

捕获和冒泡

从外向内的找监听函数，叫事件捕获
从内向外的找监听函数，叫事件冒泡

IE5*： element.attachEvent('onclick',fn) 冒泡
网景：element.addEventListener('click',fn) 捕获
W3C：element.addEventListener('click',fn，bool)

捕获不可取消，但是冒泡可以。

e.stopPropagation()可终止冒泡，一般用于封装一些独立的组件。

有些事件不可取消冒泡
1.Bubbles表示是否冒泡
2.Cancelable表示是否支持开发者取消冒泡
3.如scroll不支持取消冒泡

**注意：**如果bool不传或为falsy，则让fn走冒泡，即当浏览器在冒泡阶段发现element有fn监听函数，就会调用fn,并提供事件信息；如果bool为true，则让fn走捕获，即当浏览器在捕获阶段发现element有fn监听函数，就会调用fn,并提供事件信息；

事件委托

参考文章

事件委托，通俗地来讲，就是把一个元素响应事件的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

优点：1.减少内存消耗 2.可以监听动态元素