Universal Events

Event Description

Events are bound to components. When a component meets the event triggering condition, the corresponding event callback in the JS is executed to implement the interaction between the UI and the JS logic layer of the page.
The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters.

Different from private events, universal events can be bound to most components.

Name	Parameter	Description	Support Bubbling
touchstart	TouchEvent	Triggered when the tapping starts.	Yes⁵⁺
touchmove	TouchEvent	Triggered when the tapping moves.	Yes⁵⁺
touchcancel	TouchEvent	Triggered when the tapping is interrupted.	Yes⁵⁺
touchend	TouchEvent	Triggered when the tapping ends.	Yes⁵⁺
click	-	Triggered when a component is clicked.	Yes⁶⁺
doubleclick⁷⁺		Triggered when a component is double-clicked.	No
longpress	-	Triggered when a component is long pressed.	No
swipe⁵⁺	SwipeEvent	Triggered when a user quickly swipes on a component.	No
attached⁶⁺	-	Triggered after the current component node is mounted to the render tree.	No
detached⁶⁺	-	Triggered when the current component node is removed from the render tree.	No
pinchstart⁷⁺	PinchEvent	Triggered when a pinch operation is started.	No
pinchupdate⁷⁺	PinchEvent	Triggered when a pinch operation is in progress.	No
pinchend⁷⁺	PinchEvent	Triggered when a pinch operation is ended.	No
pinchcancel⁷⁺	PinchEvent	Triggered when the pinch operation is interrupted.	No
dragstart⁷⁺	DragEvent	Triggered when dragging starts.	No
drag⁷⁺	DragEvent	Triggered when dragging is in progress.	No
dragend⁷⁺	DragEvent	Triggered when dragging is ended.	No
dragenter⁷⁺	DragEvent	Triggered when the dragged component enters a drop target.	No
dragover⁷⁺	DragEvent	Triggered when the dragged component is being dragged over a drop target.	No
dragleave⁷⁺	DragEvent	Triggered when the dragged component leaves a drop target.	No
drop⁷⁺	DragEvent	Triggered when a component is dropped on a drop target.	No

NOTE: Events not listed in the preceding table are non-bubbling events, such as the change event. For details, see the specific component.

Table 1 Attributes of the BaseEvent object

Attribute	Type	Description
type	string	Event type, such as click and longpress
timestamp	number	Timestamp when the event is triggered

Table 2 Attributes of the TouchEvent object (inherited from BaseEvent)

Attribute	Type	Description
touches	Array<TouchInfo>	Attribute set of the touch event, including the information array of the touch points on the screen.
changedTouches	Array<TouchInfo>	Attribute set when a touch event occurs, including the information array of changed touch points on the screen. changedTouches has the same data format as touches and indicates touch point changes, such as from no touch point to newly generated touch points, from some touch points to no touch point, and location changes. For example, when the user's finger leaves the touchscreen, no data exists in the touches array, but changedTouches will save the generated data.

Table 3 TouchInfo

Attribute	Type	Description
globalX	number	Horizontal distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.
globalY	number	Vertical distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin.
localX	number	Horizontal distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.
localY	number	Vertical distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.
size	number	Touch area.
force⁶⁺	number	Touch force.

Table 4 Attributes of the SwipeEvent object (inherited from BaseEvent)

Attribute	Type	Description
direction	string	Swiping direction. The value can be one of the following: left: Swipe from right to left right: Swipe from left to right up: Swipe upwards down: Swipe downwards
distance⁶⁺	number	Swiping distance in the swiping direction.

Attribute

Type

Description

direction

string

Swiping direction. The value can be one of the following:

left: Swipe from right to left
right: Swipe from left to right
up: Swipe upwards
down: Swipe downwards

distance⁶⁺

number

Swiping distance in the swiping direction.

Table 5 Attributes of the PinchEvent object⁷⁺

Attribute	Type	Description
scale	number	Scale factor.
pinchCenterX	number	X-coordinate of the pinch center, in px.
pinchCenterY	number	Y-coordinate of the pinch center, in px.

Table 6 Attributes of the DragEvent object (inherited from BaseEvent)⁷⁺

Attribute	Type	Description
type	string	Event name.
globalX	number	Horizontal distance from the origin of the coordinates in the upper left corner of the screen.
globalY	number	Vertical distance from the origin of the coordinates in the upper left corner of the screen.
timestamp	number	Timestamp.

Event Object

When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object.

target object:

Attribute	Type	Description
dataSet⁶⁺	Object	Custom attribute set defined through data-*.

Example:

<!-- xxx.hml -->
<div>
  <div data-a="dataA" data-b="dataB" 
    style="width: 100%; height: 50%; background-color: saddlebrown;"@touchstart='touchstartfunc'></div>
</div>

// xxx.js
export default {
  touchstartfunc(msg) {
    console.info(`on touch start, point is: ${msg.touches[0].globalX}`);
    console.info(`on touch start, data is: ${msg.target.dataSet.a}`);
  }
}