WeChat mini-app tutorials and Wechat mini-app tutorials

Event of mini-program tutorial and mini-program tutorial

Series of articles:

Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML

What is an event?

1. Events are the communication between the view layer and the logic layer.
2. Events can be fed back to the logic layer for processing.
3. Events can be bound to components. When an event is triggered, the corresponding event processing function in the logic layer is executed.
4. The event object can carry additional information, such as id, dataset, and touches.

Event usage

Bind an event handler to a component.

For example, if you click bindtap, the corresponding event processing function is found in the corresponding Page of the Page when you click this component.

<View id = "tapTest" data-hi = "MINA" bindtap = "tapName"> Click me! </View>

Write the corresponding event processing function in the corresponding Page definition. The parameter is event.

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

The log information is roughly as follows:

{"type": "tap","timeStamp": 1252,"target": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"currentTarget": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" }},"touches": [{ "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151}],"detail": { "x": 30, "y": 12}}

Event details

Event category

Events are classified into bubble events and non-bubble events.

1. Bubble event: when an event on a component is triggered, the event is passed to the parent node.

2. Non-bubble event: when an event on a component is triggered, the event is not transmitted to the parent node.

List of WXML bubble events:

Type	Trigger Condition
Touchstart	Finger touch
Touchmove	Move after touch
Touchcancel	The finger touch is interrupted, such as an alarm or pop-up window.
Touchend	Finger touch ends
Tap	Finger touch and exit
Longtap	After the finger is touched, the system leaves after Ms.

Note: All custom events of other components except the preceding table are non-bubble events, such as <form/> submit events and <input/> input events, <scroll-view/> scroll event (see each component)

Event binding

The event binding method is similar to the component property, in the form of key and value.

The key starts with bind or catch and follows the event type, such as bindtap and catchtouchstart.

Value is a string. You need to define a function with the same name in the corresponding Page. Otherwise, an error is reported when an event is triggered.

Bind event binding does not prevent the bubble event from bubbling up. The catch event binding prevents the bubble event from bubbling up.

For example, in the following example, clicking inner view will trigger handleTap1 and handleTap2 successively (because the tap event will bubble to the middle view, and the middle view will prevent the tap event from bubbling, if you click "middle view", handleTap2 is triggered. If you click "outter view", handleTap1 is triggered.

<view id="outter" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3">  inner view </view> </view></view>

Event object

Unless otherwise stated, when a component triggers an event, the processing function bound to the event on the logic layer will receive an event object.

Attribute list of event objects:

Attribute	Type	Description
Type	String	Event Type
TimeStamp	Integer	Timestamp when an event is generated
Target	Object	Set of attribute values of the component that triggers the event
CurrentTarget	Object	Set of attribute values of the current component
Touches	Array	Array of touch events and touch points
Detail	Object	Additional information

Common event types

TimeStamp

The number of milliseconds that the page opens to the trigger event.

Target

The source component that triggers the event.

Attribute	Description
Id	Id of the event source component
Dataset	A collection of Custom Attributes starting with data-in the event source component.
OffsetLeft, offsetTop	Offset in the coordinate system of the event source component

CurrentTarget

The current component bound to the event.

Attribute	Description
Id	Id of the current component
Dataset	A set of Custom Attributes starting with data-in the current component.
OffsetLeft, offsetTop	Offset in the coordinate system of the current component

Note: For details about target and currentTarget, refer to the previous example. When you click inner view, the event objects target and currentTarget received by handleTap3 are both inner, and the event object target received by handleTap2 is inner and currentTarget is middle.

Dataset

Data can be defined in components, which are passed to the SERVICE through events. Writing Method: During get. dataset, the connected characters are converted to the camper elementType.

Example:

<View data-alpha-beta = "1" data-alphaBeta = "2" bindtap = "bindViewTap"> DataSet Test </view>

Page ({bindViewTap: function (event) {event.tar get. dataset. alphaBeta = 1 //-it will be converted into the camper method event.tar get. dataset. alphabeta = 2 // converts uppercase letters to lowercase letters }})

Touches

Touches is an array of touch points. Each touch point includes the following attributes:

Attribute	Description
PageX, pageY	Distance from the upper left corner of the document. The upper left corner of the document is the origin point. The horizontal direction is the X axis and the vertical direction is the Y axis.
ClientX, clientY	Distance from the upper left corner of the area to be displayed on the page (excluding the navigation bar on the screen). The horizontal direction is the X axis and the vertical direction is the Y axis.
ScreenX, screenY	The distance from the upper left corner of the screen. The upper left corner of the screen is the origin point. The horizontal direction is the X axis and the vertical direction is the Y axis.

Data carried by special events. For example, the submission event of the form component carries user input, and the error event of the media carries error information. For details, see the definition of each event in the component definition.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!