简析JavaScript事件冒泡机制

微信小程序中每个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

好好学习，天天向上，有错欢迎指正！