微信小程序中每個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
好好學習，天天向上，有錯歡迎指正！