【www.bbyears.com--js教程】
js事件冒泡
js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行
html:
- 全部
- 纽约
- 洛杉矶
- 拉斯维加斯
- 夏威夷
- 旧金山
- 奥兰多
- 西雅图
js:
$("ul[data-type="cityPick"]").on("click",function(){
alert("父元素ul被点击");
});
$("ul[data-type="cityPick"]").on("click","li",function(){
alert("子元素li被点击");
});
当li的点击事件被触发时，父级ul的点击事件也被触发执行了，而在某些场合我们是不希望它冒泡的，怎么做呢? 简单!
js:
$("ul[data-type="cityPick"]").on("click",function(){
alert("父元素ul被点击");
});
$("ul[data-type="cityPick"]").on("click","li",function(e){
e.stopPropagation();//阻止冒泡
alert("子元素li被点击");
});
加上e.stopPropagation(); 这一句便可以阻止事件冒泡了js事件委托
js事件委托，其实是使用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，这样做的好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。 还有一个好处就是可以处理动态插入dom中的元素，直接绑定的方式是不行的。
就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。
看实例：
假如现在有10个按钮，要为每个按钮绑定一个click事件，可能才十个按钮，你可以一个一个的绑定或用循环进行绑定，但是这样性能呢？
html:
提交
提交
提交
提交
提交
提交
提交
提交
提交
提交
js:
$(".button-group").on("click",".btn",function(){
alert($(this).html());
});
这里可以看出，我们只是为所有的button的一个父级绑定了click事件，而不是为所有的button绑定事件，极大的提高了性能，这样做的好处还有可以对动态加进来的元素进行处理就是有一个按钮原本的dom里面是没有的，是你通过其他方式添加进来的，即未来元素，用直接绑定方法是不能成功的，只能用事件委托，委托给该元素的父级进行处理
由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！
其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法，可以说是一步步改进，
假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件：$("info_table td").bind("click", function(){/*显示更多信息*/});
问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存
事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：$("#info_table td").live("click",function(){/*显示更多信息*/});
这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次）。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。
一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：
$()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#infotable td").live...可以，但$("#infotable").find("td").live...不行；收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。
而为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});这样，“受托方”就从默认的$(document)变成了$("#infotable")[0]，节省了冒泡的旅程。
.delegate()
如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
使用.delegate()，前面的例子可以这样写：$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);如果指定selector，则为事件委托；否则，就是常规绑定。
所以现在只要用on方法就可以了，推荐用on方法进行委托或常规绑定事件