微信小程序中每个item都有一个事件绑定，catchtap="detailTap" ，用户点击触发事件，有些大部分组件共有的事件，如：touchstart、touchmove、touchend、touchcancel、longtap、tap，这六个事件都是会冒泡的事件，除此之外，其他事件都是非冒泡事件，事件绑定的方式是用bind或catch加上小写的事件名称，如catchtap,bindtap。其中bind允许冒泡传递，catch会阻止冒泡，把所有事件变为非冒泡事件。
响应函数一般存在event参数，event.target和event.currentTarget存在区别，前者永远指向触发事件的组件，后者是因为事件冒泡机制设置的，指向事件当前指向的组件。
浏览器客服端中基本都是事件驱动，即事件发生 > 做出相应动作；
事件冒泡是指事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。事件捕获是事件从最不精确的对象(document 对象)开始触发，然后到最精确。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body id="body"> 8 <div id="box1" class="box1"> 9 <div id="box2" class="box2"> 10 <span id="span">span</span> 11 </div> 12 </div> 13 </body> 14 </html> 15 16 <style> 17 body,#box1,#box2,#span{padding: 20px;} 18 body{background-color: cornflowerblue;display: block;} 19 #box1{background-color: #ffd705;} 20 #box2{background-color: aquamarine;} 21 #span{background-color: orangered;} 22 </style> 23 24 <script type="text/javascript"> 25 window.onload = function() { 26 document.getElementById("body").addEventListener("click",eventHandler); 27 } 28 function eventHandler(event) { 29 console.log("时间："+new Date(event.timeStamp)+" 产生事件的节点：" + event.target.id +" 当前节点："+event.currentTarget.id); 30 } 31 </script>
运行结果如下：
pop.html:29 时间：Thu Jan 01 1970 08:00:11 GMT+0800 (中国标准时间) 产生事件的节点：body 当前节点：body
pop.html:29 时间：Thu Jan 01 1970 08:00:14 GMT+0800 (中国标准时间) 产生事件的节点：box1 当前节点：body
pop.html:29 时间：Thu Jan 01 1970 08:00:14 GMT+0800 (中国标准时间) 产生事件的节点：box2 当前节点：body
pop.html:29 时间：Thu Jan 01 1970 08:00:15 GMT+0800 (中国标准时间) 产生事件的节点：span 当前节点：body
当这些元素被点击，最终都会传递到body,
如何阻止事件冒泡
1.在对应事件内加入event.stopPropagation(),终止事件的广播分发，在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了。
2.判断此时event.target和event.currentTarget是否相等
3.阻止事件的默认行为，例如click <a>后的跳转，在W3c中，使用preventDefault（）方法，在IE下设置window.event.returnValue = false;
4.事件委托，通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为
1 <script type="text/javascript"> 2 window.onload = function() { 3 document.getElementById("body").addEventListener("click",eventPerformed); 4 } 5 function eventPerformed(event) { 6 var target = event.target; 7 switch (target.id) { 8 case "span": 9 alert("您好，我是span。"); 10 break; 11 case "div1": 12 alert("您好，我是第二层div。"); 13 break; 14 case "div2": 15 alert("您好，我是最外层div。"); 16 break; 17 } 18 } 19 </script>
参考链接：
https://my.oschina.net/jsongo/blog/755722
http://www.111cn.net/wy/js-ajax/93133.htm
http://blog.csdn.net/luanlouis/article/details/23927347
好好学习，天天向上，有错欢迎指正！