事件代理实现

1、事件传播机制、阻止传播、取消默认事件、事件代理

当事件发生在某个文档节点上时（即事件目标），目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。

2级DOM的事件传播包含三个阶段:
捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
到达事件的目标节点，执行目标节点的时间处理程序。
事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。
相应的，2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
addEventListener(eventType, handler, propagate);
removeEventListener(eventType, handler, propagate);
三个参数意思分别如下:
eventType: 即事件类型（不加on）。比如："click"。
handler: 事件处理函数。传入参数即为事件对象event。
propagate: 是否只执行捕获和目标节点两个阶段。true的话，只执行1，2两个阶段；false的话，只指向2，3两个阶段。
IE的事件传播只包含上边的2和3两个阶段
相应的，IE通过下面两个函数给节点对象添加和删除事件处理函数。
attachEvent(eventType, handler);
detachEvent(eventType, handler);
参数意思同2级DOM对应的函数参数

事件代理就是：当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上。
事件代理是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件代理，委托它们父级代为执行事件。