说到事件，就要追溯到网景与微软的“浏览器大战”了。当时，事件模型还没有标准，两家公司的实现就是事实标准。网景在Navigator中实现了“事件捕获”的事件系统，而微软则在IE中实现了一个基本上相反的事件系统，叫做“事件冒泡”。这两种系统的区别在于当事件发生时，相关元素处理（响应）事件的优先权不同。
下面举例说明这两种事件机制的区别。假设文档中有如下结构：
<div>
<span>
<a>...</a>
</span>
</div>因为这三个元素是嵌套的，所以单击了a，实际上也就单击了span和div。换句话说，这三个元素都应该有处理单击事件的机会。在事件捕获机制下，处理这个单击事件的优先次序是：div > span > a；而在事件冒泡机制下，处理这个单击事件的优先次序则是：a > span > div。
后来，W3C的规范要求浏览器同时支持捕获和冒泡机制，并允许开发人员选择把事件注册到哪个阶段。于是就有了下面这个注册事件的标准方法：
target.addEventListener(type, listener, useCapture Optional );其中：
- type：字符串，表示监听的事件类型
- listener：监听器对象（JavaScript函数），在指定事件发生时可以收到通知
- useCapture：布尔值，是否注册到捕获阶段
在实际应用开发中，为了确保与IE（因为它不支持捕获）兼容，useCapture一般都指定为false（默认值也是false）。换句话说，只把事件注册到冒泡阶段；对于上面那个简单的例子来说，响应顺序就是：a > span > div。
一、事件冒泡（ Event Bubbling）
IE 的事件流叫做事件冒泡，即事件开始时由最躯体的元素接收，然后逐级向上传播到较为不具体的节点。
IE9 、FF、 Chrome和Safari 将事件一直冒泡到 <window>对象。
二、事件捕获（ Event Capturing）
事件捕获的思想是不太具体的节点应该更早接收到事件，二最具体的节点应该最后接收到事件。
IE9 、FF、 Chrome、Opera 和Safari都支持这种事件流模型，“ DOM2级事件”规范要求应该从 document对象开始传播，但是这些浏览器都是从 window对象开始捕获事件的。
利用jquery 阻止事件冒泡和元素事件的默认行为
$(function(){
$("#id1").on("click",function(event){
console.log('id1');
//阻止冒泡
//event.stopPropagation();
//阻止元素事件的默认行为例如表单提交
//event.preventDefault();
//或者返回false 阻止冒泡和默认行为
return false;
});
$("#id2").on("click",function(event){
console.log('id2');
event.stopPropagation();
});
});
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; z-index:1"></div>
</div>
给div元素下class =sound 的未来元素绑定click事件
$("#msg-list").on("click","div.sound",function(event){
msgItemTap(this, event);
});