Introducing three mini program events

This article introduces how to use WeChat applet events.

1: Event bubbling

atWeChatIn the mini program development tool, create a new event folder, create a new file, and fill in the following code in event.wxml:

1.  这里是view 1  这里是view 2  这里是view 3   

   Copy after login

Fill in the following code in event.wxss:

.view1{ height: 500rpx; width: 100%; background-color:beige; } .view2{ height: 400rpx; width: 80%; background-color: red; }

1. .view3{ height: 300rpx; width: 60%; background-color:aqua; }

   Copy after login

Add the following code to event.js:

1. //事件处理函数 view1click : function(event){ console.log("view1click") }, view2click : function(){ console.log("view2click") }, view3click : function(event){ console.log("view3click") },

   Copy after login

Compile and run, then click the view3 area in the simulator. The result is shown in Figure 1: You can see In addition to view3, the click events of view2 and view1 have all responded. This is the click event bubbling

##Figure 1

##2: Prevent event bubbling

will

Change to

##---to modify For:
catchtap

##Figure 2

In the above code:

Add the code to print the incoming event event information as follows: Compile and run as shown in Figure 3:

view1click : function(event){ console.log("view1click") console.log(event) }

#Picture 3

The dataset contains the customattribute

1. Special recommendation:"php Programmer Toolbox" V0.1 version download

2.WeChat applet complete source code download

3.WeChat mini program demo: imitation mall