Introducing three mini program events

Abstract: This article introduces how to use the WeChat applet event. 1: The event bubbles up in the WeChat applet development tool. Create a new event folder, create a new file, and fill in the following code in event.wxml: viewclass=view1bindtap=view1clickid=view1 data-title=news title data-id=100 Here...

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  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">
     这里是view 1
       <view class="view2" bindtap="view2click" id="view2">
            这里是view 2
             <view class="view3" bindtap="view3click" id="view3">
                  这里是view 3
             </view>
       </view>
   </view>

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;
   }

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")
     },

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

<view class="view3" bindtap="view3click" id="view3">

Change to

<view class="view3" catchtap="view3click" id="view3">

##--- to modify For:
catchtap

The other codes remain unchanged, compile and run, or click the view3 area to view the log information, as shown in Figure 2. The event no longer bubbles up

##Figure 2

3: Event information is passed in

In the above code:

view1click: function(event)

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 custom attribute

, id: 100, title: "News title", this custom attribute is set in the following code:

<view  class="view1"  bindtap="view1click"  id="view1" data-title="新闻标题"  data-id="100">

【Related recommendations】

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

2. WeChat applet complete source code download

3. WeChat mini program demo: imitation mall

The above is the detailed content of Introducing three mini program events. For more information, please follow other related articles on the PHP Chinese website!