简析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 当前节点:bodypop.html:29 时间:Thu Jan 01 1970 08:00:14 GMT+0800 (中国标准时间) 产生事件的节点:box1 当前节点:bodypop.html:29 时间:Thu Jan 01 1970 08:00:14 GMT+0800 (中国标准时间) 产生事件的节点:box2 当前节点:bodypop.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

 

 

 

 好好学习,天天向上,有错欢迎指正!

 

 

 

 

 

 

 

 

31人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册