jquery的事件委托小结利用与避免事件的冒泡

确实在写jquery事件过程中始终绕不开一个问题就是事件的冒泡。

       jquery的事件冒泡过程

     在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（ 父级对象所有同类事件都将被激活 ），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1. 生成一个click事件传递给 div 来处理
2. 由于没有事件处理函数直接绑定在 div 上，所以事件冒泡到DOM树上
3. 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
6. 如果找到了匹配的元素，那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

虽然事件冒泡在一些时候给我们带来了一些麻烦，但是在很多时候还是必要的。特别是在允许用户手动添加一些dom对象的时候，我们就可以利用事件的冒泡让父级的dom对象的事件来弥补没有给新加节点绑定事件的缺陷。但是，更多的时候我们不愿意这么做毕竟事件的冒泡会激活所有父级对象的同类事件。所以，我们可以使用

e.proPagation();

来组织事件的冒泡。使用live()方法给新添加的节点绑定方法。