WeChat Mini Program Practical Development View Layer WXML: Events

The previous article explained data binding, templates, logic, etc. The main function is to display data in the view and how to display it. But presentation is not enough, we need interaction. For example, an HTML page can display text and pictures, but it also needs some interactions, such as links, buttons, etc.

Interaction is actually an event. For example, onClick of button in HTML is the action triggered when clicked and the developer's corresponding business logic processing.

1. Event example: bindtap

Events are the communication method from the view layer to the logic layer. Feedback the user's behavior to the logic layer for processing. It is generally bound to a component, executes the processing function when triggered, and can carry parameters.

Make a button to jump to the page.

index.wxml:

View Layer WXML: Event

index.js：
toEvent : function(){

## // Jump to event.wxml page

wx.navigateTo({       url: '/pages/wxml/event'
})
}

Effect animation

##2. Event classification: bubbling, non-bubbling

Bubble event:
## 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 passed to the parent node.

The following are bubbling events, other component events are non-bubbling events without special declaration

Type Trigger eventtouchstarttouchmovetouchcanceltouchendtap                                      #Leave immediately after touching the finger

Finger touch action starts

Finger moves after touching

Finger touch action is interrupted, such as incoming call reminder, pop-up window

The finger touch action ends

longtap

After touching the finger, leave after more than 350ms

For example:

##The event starts with bind or catch

#bind event binding does not prevent bubbling events from bubbling upwards, such as bindtap.

catch event binding can prevent bubbling events from bubbling upward, such as catchtap.

##Because handleTap2 is a catchtap, so:

Click on the inner view, Will trigger handleTap3, handleTap2

. Clicking the middle view will trigger handleTap2

##. Clicking the outer view will trigger handleTap1

##.

#Look in the debug log

##You can see the event execution log and event object.

3. Event Object

Unless otherwise specified, when a component triggers an event, the handler function bound to the event by the logic layer will receive an event object. (See picture above, event object)

BaseEventCustomEventCustom event (inherits BaseEvent)Object Additional informationArrayArray

Please refer to the official documentation for detailed information about the event.

target and currentTarget

target and currentTarget can refer to the above example , when the inner view is clicked, the event object target and currentTarget received by handleTap3 are both inner, while the event object target received by handleTap2 is inner and currentTarget is middle.

The dataset attributes in target and currentTarget
can define data in the component, This data will be passed to SERVICE through events.

Writing method: Start with data-, multiple words are linked by hyphens-, all uppercase letters will be automatically converted to lowercase, and hyphens will be converted to camel case

For example:

##

##touches is Touch Array of objects

For more practical development of WeChat applet view layer WXML: For event-related articles, please pay attention to the PHP Chinese website!

type
String	Event Type	timeStamp
Integer	The timestamp when the event was generated	target
Object	#A collection of some property values ​​of the component that triggers the event	currentTarget
Object	A collection of some property values ​​of the current component
##detail
		##TouchEvent touch event (inherits BaseEvent)
touches
Information about the touch points currently staying on the screen Array		changedTouches
Currently changed touch points Array of information