Detailed explanation of the difference between WeChat applet bindtap and catchtap

1. What is an event?

(1) Events are the communication method from the view layer to the logic layer.

(2) Events can feed back user behavior to the logic layer for processing.

(3) Events can be bound to components. When a trigger event is reached, the corresponding event processing function in the logic layer will be executed.

(4) Event objects can carry additional information, such as id, dataset, touches

2. How to use events

(1) Simply put, it is to bind the event to the component. Both bindtap and catchtap belong to click events. After binding, clicking the component can trigger this function.

(2) The tapName function accepts a parameter event, which stores some context information about the function call.

(3) Label elements

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

(4) Binding events

Page({
    tapName: function(event) {
        console.log(event)
    }
})

3. The difference between bindtap and catchtap

(1) Similarities: First, they are both click event functions, which means they are triggered when clicked. In this function, they are the same and there is no need to distinguish them.

(2) Differences: The main difference between them is that bindtap is bubbling and catchtap is non-bubbling.

4. Events in mini programs are divided into bubbling events and non-bubbling events.

(1) This article uses the bubbling event tap (a finger touches and leaves immediately, that is, a click event) as an example to distinguish between bind and catch events.

(2) bindtap? Event binding does not prevent bubbling events from bubbling upwards

(3) catchtap? event binding can prevent bubbling events from bubbling upwards

The difference between target and currentTarget of an event

Still using the above wxml&&wxss code, this time we modify the print value of the js code;

// js
  outerTapFn(e) {
    console.log("My outer parent element was clicked =.=",e);
  },
  innerTapFn(e) {
    console.log("I am the inner child element that was clicked =.=",e);
  },

The target corresponds to the source component that triggers the event. This component may be a child component or a parent component, depending on the area where the action is performed. And currentTarget always corresponds to the component to which the event is bound;

5. Examples

1. If there are three view click events and all use bindtap, are the three views hierarchically contained?

<view id="outer" bindtap="out">
    Outer View
    <view id="middle" bindtap="middle">
        middle view
        <view id="inner" bindtap="inner">
            inner view
        </view>
    </view>
</view>

2. In js, the code prints out the log in the corresponding event. The code is as follows?

out:function(e){
    console.log("--out bindtap click")
}, middle: function (e) {
    console.log("--middle bindtap click")
}, inner: function (e) {
    console.log("--inner bindtap click")
}

3. Bindtap execution results

• Click out view to print out a log --> out bindtap click
• Click on the middle view to print out two logs --> middle bindtap click--out bindtap click
• Click innew view to print out three logs --> inner bindtap click--middle bindtap click--out bindtap click
• It can be seen that bindtap does not prevent bubbling upwards, so clicking inner bubbles all the way to the outermost layer.

4. If we only change the bindtap of the middle view to catchtap

• Click on the out view to print out a log --> out bindtap click (because there is no upper element, it cannot bubble up)
• Click the middle view to print out a log --> middle bindtap click (catchtap prevents bubbling upwards)
• Click innew view to print out two logs --> inner bindtap click--middle bindtap click (catchtap prevents upward bubbling)
  

This is the end of this article about the detailed explanation of the difference between WeChat mini-programs bindtap and catchtap. For more relevant content about WeChat mini-programs bindtap and catchtap, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!