微信小程序生命周期及（bindtap和catchtap）点击事件_微信小程序catchtap

小程序生命周期：

data:{} 页面的初始数据；

​ data的后面可以写wxml中绑定的事件，如showPopup() {}；

​ onLoad:function(options){} 监听页面加载；

​ onShow:function(){} 监听页面显示；

​ onHide:function(){} 监听页面隐藏；

​ onUnload:function(){} 监听页面卸载；

（bindtap和catchtap）点击事件

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<view id="outer" bindtap="handleTap1">  	
    outer view    
    <view id="middle" catchtap="handleTap2">    
        middle view    
        <view id="inner" bindtap="handleTap3">      
            inner view   
        </view>
    </view>
</view> 
Page({    
	handleTap1:function(event){  //点击输出outer view bindtap      	console.log("outer view bindtap")    },    
	handleTap2: function (event) {  //点击输出middle view      console.log("middle view catchtap")    },    
	handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap      console.log("inner view bindtap")    },
})

<view id="outer" bindtap="handleTap1">  	
    outer view    
    <view id="middle" bindtap="handleTap2">   
        middle view    
        <view id="inner" bindtap="handleTap3">      
            inner view   
        </view>
    </view>
</view> 
Page({    
	handleTap1:function(event){  
		//点击输出outer view bindtap      
		console.log("outer view bindtap")    
	},    
	handleTap2: function (event) {  
		//点击输出outer view bindtap middle view      
		console.log("middle view catchtap")    
	},    
	handleTap3: function (event) {  
		//点击输出outer view bindtap inner view bindtap  middle view catchtap         
		console.log("inner view bindtap")
	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38