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

   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

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

Change to

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

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

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

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

2. WeChat applet complete source code download

3. WeChat mini program demo: imitation mall