What are events in mini program development?

What are events in WeChat mini program development? From the definition of events, 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, and are bound to components. When a trigger event is reached, the corresponding event processing function in the logic layer will be executed. In addition, event objects can carry additional information, such as id, dataset, touches.

Since the WeChat applet framework adopts a design method of logic layer and UI layer analysis, this design method needs to solve two problems: the view layer responds to the logic layer logic and data Changes, the view layer feeds back the user's operations to the logic layer. WeChat defines some syntax and rules to help developers connect the view layer and the logic layer. The former problem can be solved through data binding, while the second problem needs to be solved using events.

Event Binding

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

//wxml
Click me!
//.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: current Component

type: Event type

timeStamp: Timestamp (the number of milliseconds that elapsed from when the page was opened to when the event was triggered)

touches: Array containing touch points (multi-touch Control)

changedTouches: Array of changed touch points (multi-touch)

detail: Additional custom information

Bubbling events and non- Bubble events

Why are there differences between target and currentTarget? This is because events are divided into two categories, bubbling events and non-bubble events

Bubble events: when When an event on a component is triggered, the event is 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 the event in the above example contains currentTarget).

Why bubbling events are needed

With bubbling events, some functions can be implemented 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, to prevent the event. bubbling behavior.

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

//.wxml
我是父亲节点
我是儿子节点
我是孙子节点

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

In summary, an event refers to something happening, usually the user performs some operations, such as clicking a button Or swiped your 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.

This article is reproduced from: http://zixun.jisuapp.cn/xcxkfjc/3059.html

Recommended: " Mini Program Development Tutorial 》

The above is the detailed content of What are events in mini program development?. For more information, please follow other related articles on the PHP Chinese website!