Events in the Basics of Mini Program Development (9)

As mentioned earlier, the WeChat applet framework is a design method for analyzing the logic layer and UI layer. This design method needs to solve two problems

The UI layer responds to changes in the logic and data of the logic layer
The UI layer feeds back the user's operations to the logic layer

The data binding mentioned earlier solves the first problem, and eventTo solve the second problem

What is an event
Events are the communication method from the view layer to the logic layer.
Events can feed back user behavior to the logic layer for processing.
Events can be bound to components. When the trigger event is reached, the corresponding event processing function in the logic layer will be executed.
Event objects can carry additional information, such as id, dataset, touches.

To summarize, an event refers to something happening, usually when the user performs some operation, such as clicking a button or sliding a finger on the phone screen. When an event occurs, the framework calls the event handling function (if any) so that it can respond to user operations.

Event Binding

Complete the response to user operations through event binding. For example, to handle the tap event of the view tag, in the tag Add bindtap = 'tapName' to the attribute, and then add tapName function in .js

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

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

The event object contains some data about the event:

target: the component that triggered the event
currentTarget: the current component
type: event type
timeStamp: timestamp ( The number of milliseconds that elapsed between the page opening and the event being triggered)
touches: an array containing touch points (multi-touch)
changedTouches: the changed touch points Array (multi-touch)
detail: additional custom information

Bubble events and non-bubble events

Why is there# The difference between ##target and currentTarget is because events are divided into two categories, bubble events and non-bubble events

Bubbling events: When an event on a component is triggered, the event will be passed to the parent node.

Non-bubbling events: When an event on a component is triggered, the event will not be delivered to the parent node.

The

tap event is a bubbling event (this is why event in the above example contains currentTarget), and in addition Other bubbling events include | Type| Trigger Condition|
| ------------- |-------------|
| touchstart | The finger touch action starts|
| touchmove| The finger moves after touching|
| touchcancel| The finger touch action is interrupted, such as incoming call reminder, pop-up window|
| touchend| The finger touch action ends |
| tap | Leave immediately after touching the finger |
| longtap | Leave after more than 350ms after touching the finger |

Why is the bubbling event needed?

With the bubbling event , you can implement some functions more conveniently.

For example, the program has a view that contains the user's avatar and name. When the user clicks on the avatar or name, the user details page is entered. If there is no bubbling event, you need to handle the click events of the avatar and name. Now you only need to wrap a component in the outer layer and handle the event of the component.

Prevent event bubbling

In some cases, you may want to prevent the event from bubbling. You can use

catch event binding, such as catchtap, you can prevent the bubbling behavior of events.

You can use the following code example to deepen your understanding of bubbling events

//.wxml
<view id="outter" bindtap="handleTapOutter">
  我是父亲节点
  <view id="middle" catchtap="handleTapMiddle">
    我是儿子节点
    <view id="inner" bindtap="handleInner">
      我是孙子节点
    </view>
  </view>
</view>

//.js
Page({
  handleTapOutter: function(event) {
    console.log("父亲节点被点击")
  },
  handleTapMiddle: function(event) {
    console.log("儿子节点被点击")
  },
  handleInner: function(event) {
    console.log("孙子节点被点击")
  },
})

Try to modify the tap event binding method of nodes at all levels and see what changes will occur in the output logs.

The above is the detailed content of Events in the Basics of Mini Program Development (9). For more information, please follow other related articles on the PHP Chinese website!