# 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.

Yes5+

touchmove

TouchEvent

Triggered when the tapping moves.

Yes5+

touchcancel

TouchEvent

Triggered when the tapping is interrupted.

Yes5+

touchend

TouchEvent

Triggered when the tapping ends.

Yes5+

click

-

Triggered when a component is clicked.

Yes6+

doubleclick7+

  

Triggered when a component is double-clicked.

No

longpress

-

Triggered when a component is long pressed.

No

swipe5+

SwipeEvent

Triggered when a user quickly swipes on a component.

No

attached6+

-

Triggered after the current component node is mounted to the render tree.

No

detached6+

-

Triggered when the current component node is removed from the render tree.

No

pinchstart7+

PinchEvent

Triggered when a pinch operation is started.

No

pinchupdate7+

PinchEvent

Triggered when a pinch operation is in progress.

No

pinchend7+

PinchEvent

Triggered when a pinch operation is ended.

No

pinchcancel7+

PinchEvent

Triggered when the pinch operation is interrupted.

No

dragstart7+

DragEvent

Triggered when dragging starts.

No

drag7+

DragEvent

Triggered when dragging is in progress.

No

dragend7+

DragEvent

Tiggered when dragging is ended.

No

dragenter7+

DragEvent

Triggered for entering the component to release.

No

dragover7+

DragEvent

Triggered for being in the component to release.

No

dragleave7+

DragEvent

Triggered for exiting the component to release.

No

drop7+

DragEvent

Triggered when the drop operation occurs in the droppable area.

No

>![](../../public_sys-resources/icon-note.gif) **NOTE:** >- Events not listed in the preceding table are non-bubbling events, such as the [change event](js-components-basic-input.md#section1721512551218). 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** Attributes of the TouchEvent object

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.

force6+

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:

  1. left: Swipe from right to left
  2. right: Swipe from left to right
  3. up: Swipe upwards
  4. down: Swipe downwards

distance6+

number

Swiping distance in the swiping direction.

**Table 5** Attributes of the PinchEvent object7+

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 KeyEvent object \(inherited from BaseEvent\)7+\(Rich\)

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

dataSet6+

Object

Custom attribute set defined through data-*.

**Example:** ```
``` ``` // 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}`); } } ```