1、事件传播机制、阻止传播、取消默认事件、事件代理
（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对应的函数参数
（2）阻止传播，取消默认事件
- DOM浏览器
阻止冒泡e.stopPropagation();
阻止默认事件event.preventDefault() - IE浏览器
阻止冒泡e.cancelBubble = true;
阻止默认事件event.returnValue = false; - 使用 onmouseenter、onmouseleave等事件默认阻止冒泡
（3）事件代理
- 事件代理就是：当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上。
- 事件代理是利用事件的冒泡原理来实现的，就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件代理，委托它们父级代为执行事件。
2、演示事件传播的过程，演示阻止传播的效果
- IE事件传播，即事件冒泡，由内而外依次传播
如下图点击' .child '时输出的结果
测试01.png
在' .patent '上添加阻止冒泡，结果如下：
测试02.png
代码：http://js.jirengu.com/kikec/2/edit?html,js,console,output
- DOM2事件传播，即事件先捕获、再冒泡
如下图点击' .child '时输出的结果
测试03.png
在' .patent '上添加阻止冒泡，结果如下：
测试04.png
在' .patent '上添加阻止捕获，结果如下：
测试05.png
代码：http://js.jirengu.com/bimat/1/edit?html,js,console,output
3、实现如下页面：http://book.jirengu.com/fe/code/projects/HungoouRadio/login.html
1.不用事件代理实现的，代码比较多：http://js.jirengu.com/kotep
2.抽空再用事件代理做一遍：
