> Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## 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.
- 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.
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="afa4290e2620f4f5fbdcb74dcae84e536"><aname="afa4290e2620f4f5fbdcb74dcae84e536"></a><aname="afa4290e2620f4f5fbdcb74dcae84e536"></a>Triggered when the tapping starts.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="a37f7cc43d82c4ee18512bd079349079d"><aname="a37f7cc43d82c4ee18512bd079349079d"></a><aname="a37f7cc43d82c4ee18512bd079349079d"></a>Triggered when the tapping moves.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="a739d9ef0db624f6284554aeaeddffa0a"><aname="a739d9ef0db624f6284554aeaeddffa0a"></a><aname="a739d9ef0db624f6284554aeaeddffa0a"></a>Triggered when the tapping is interrupted.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="a05c0fe4e05ef4154acee8a06ad56a2de"><aname="a05c0fe4e05ef4154acee8a06ad56a2de"></a><aname="a05c0fe4e05ef4154acee8a06ad56a2de"></a>Triggered when the tapping ends.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="a1d32f00c38c440ddaa63c3f3e01d4e09"><aname="a1d32f00c38c440ddaa63c3f3e01d4e09"></a><aname="a1d32f00c38c440ddaa63c3f3e01d4e09"></a>Triggered when a component is clicked.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p10706723605"><aname="p10706723605"></a><aname="p10706723605"></a>Triggered when a component is double-clicked.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="a44b8585170304b5596c41714772e605e"><aname="a44b8585170304b5596c41714772e605e"></a><aname="a44b8585170304b5596c41714772e605e"></a>Triggered when a component is long pressed.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p2711556162"><aname="p2711556162"></a><aname="p2711556162"></a>Triggered when a user quickly swipes on a component.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p676263610459"><aname="p676263610459"></a><aname="p676263610459"></a>Triggered after the current component node is mounted to the render tree.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p9796124114612"><aname="p9796124114612"></a><aname="p9796124114612"></a>Triggered when the current component node is removed from the render tree.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p877817251226"><aname="p877817251226"></a><aname="p877817251226"></a>Triggered when a pinch operation is started.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p49236391135"><aname="p49236391135"></a><aname="p49236391135"></a>Triggered when a pinch operation is in progress.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p1987715441638"><aname="p1987715441638"></a><aname="p1987715441638"></a>Triggered when a pinch operation is ended.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p1993034918316"><aname="p1993034918316"></a><aname="p1993034918316"></a>Triggered when the pinch operation is interrupted.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p1341894592614"><aname="p1341894592614"></a><aname="p1341894592614"></a>Triggered when dragging starts.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p915141041313"><aname="p915141041313"></a><aname="p915141041313"></a>Triggered when dragging is in progress.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p143310312509"><aname="p143310312509"></a><aname="p143310312509"></a>Triggered when dragging is ended.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p79702028125013"><aname="p79702028125013"></a><aname="p79702028125013"></a>Triggered when the dragged component enters a drop target.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p8987163414509"><aname="p8987163414509"></a><aname="p8987163414509"></a>Triggered when the dragged component is being dragged over a drop target.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p8335173910503"><aname="p8335173910503"></a><aname="p8335173910503"></a>Triggered when the dragged component leaves a drop target.</p>
<tdclass="cellrowborder"valign="top"width="45.34453445344535%"headers="mcps1.1.5.1.3 "><pid="p162704558509"><aname="p162704558509"></a><aname="p162704558509"></a>Triggered when a component is dropped on a drop target.</p>
>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.
<tdclass="cellrowborder"valign="top"width="68.69%"headers="mcps1.2.4.1.3 "><pid="a732751a8a4114815953f940529086cc4"><aname="a732751a8a4114815953f940529086cc4"></a><aname="a732751a8a4114815953f940529086cc4"></a>Event type, such as <strongid="b17928122183715"><aname="b17928122183715"></a><aname="b17928122183715"></a>click</strong> and <strongid="b78784073719"><aname="b78784073719"></a><aname="b78784073719"></a>longpress</strong></p>
<tdclass="cellrowborder"valign="top"width="68.69%"headers="mcps1.2.4.1.3 "><pid="a816c5efe2ab2447bbd14dfd91095052c"><aname="a816c5efe2ab2447bbd14dfd91095052c"></a><aname="a816c5efe2ab2447bbd14dfd91095052c"></a>Timestamp when the event is triggered</p>
</td>
</tr>
</tbody>
</table>
**Table 2** Attributes of the TouchEvent object \(inherited from BaseEvent\)
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="aa3d09d0a55704a6097fb39739436c5db"><aname="aa3d09d0a55704a6097fb39739436c5db"></a><aname="aa3d09d0a55704a6097fb39739436c5db"></a>Attribute set of the touch event, including the information array of the touch points on the screen.</p>
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="a85eddf1d320641a8b344aaadffe6d49e"><aname="a85eddf1d320641a8b344aaadffe6d49e"></a><aname="a85eddf1d320641a8b344aaadffe6d49e"></a>Attribute set when a touch event occurs, including the information array of changed touch points on the screen. <strongid="b185721925164418"><aname="b185721925164418"></a><aname="b185721925164418"></a>changedTouches</strong> has the same data format as <strongid="b18207185144513"><aname="b18207185144513"></a><aname="b18207185144513"></a>touches</strong> 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 <strongid="b127219713482"><aname="b127219713482"></a><aname="b127219713482"></a>touches</strong> array, but <strongid="b1813110115482"><aname="b1813110115482"></a><aname="b1813110115482"></a>changedTouches</strong> will save the generated data.</p>
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="a834cd2553aa7439781eeeddd342329df"><aname="a834cd2553aa7439781eeeddd342329df"></a><aname="a834cd2553aa7439781eeeddd342329df"></a>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.</p>
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="a5a1306479f784edf8a5a42f76e2540be"><aname="a5a1306479f784edf8a5a42f76e2540be"></a><aname="a5a1306479f784edf8a5a42f76e2540be"></a>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.</p>
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="ad7268ba243c546af8f93208c427c5340"><aname="ad7268ba243c546af8f93208c427c5340"></a><aname="ad7268ba243c546af8f93208c427c5340"></a>Horizontal distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.</p>
<tdclass="cellrowborder"valign="top"width="63%"headers="mcps1.2.4.1.3 "><pid="ae3aa585280c449e5a8fe954711ab56fd"><aname="ae3aa585280c449e5a8fe954711ab56fd"></a><aname="ae3aa585280c449e5a8fe954711ab56fd"></a>Vertical distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p41191257174"><aname="p41191257174"></a><aname="p41191257174"></a>Swiping direction. The value can be one of the following:</p>
<aname="ol241216371597"></a><aname="ol241216371597"></a><olid="ol241216371597"><li><strongid="b151161324356"><aname="b151161324356"></a><aname="b151161324356"></a>left</strong>: Swipe from right to left</li><li><strongid="b19343123183517"><aname="b19343123183517"></a><aname="b19343123183517"></a>right</strong>: Swipe from left to right</li><li><strongid="b168477363520"><aname="b168477363520"></a><aname="b168477363520"></a>up</strong>: Swipe upwards</li><li><strongid="b832616413351"><aname="b832616413351"></a><aname="b832616413351"></a>down</strong>: Swipe downwards</li></ol>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p041344171112"><aname="p041344171112"></a><aname="p041344171112"></a>Swiping distance in the swiping direction.</p>
</td>
</tr>
</tbody>
</table>
**Table 5** Attributes of the PinchEvent object<sup>7+</sup>
<tdclass="cellrowborder"valign="top"width="44.58445844584458%"headers="mcps1.2.4.1.3 "><pid="p172245414455"><aname="p172245414455"></a><aname="p172245414455"></a>X-coordinate of the pinch center, in px.</p>
<tdclass="cellrowborder"valign="top"width="44.58445844584458%"headers="mcps1.2.4.1.3 "><pid="p235975213453"><aname="p235975213453"></a><aname="p235975213453"></a>Y-coordinate of the pinch center, in px.</p>
</td>
</tr>
</tbody>
</table>
**Table 6** Attributes of the DragEvent object \(inherited from BaseEvent\)<sup>7+</sup>
<tdclass="cellrowborder"valign="top"width="62.94%"headers="mcps1.2.4.1.3 "><pid="p135561846957"><aname="p135561846957"></a><aname="p135561846957"></a>Horizontal distance from the origin of the coordinates in the upper left corner of the screen.</p>
<tdclass="cellrowborder"valign="top"width="62.94%"headers="mcps1.2.4.1.3 "><pid="p355612467514"><aname="p355612467514"></a><aname="p355612467514"></a>Vertical distance from the origin of the coordinates in the upper left corner of the screen.</p>
| touchstart | TouchEvent | Triggered when the tapping starts.<br>> **Note**: For details about **TouchEvent**, see Table 2.| Yes<sup>5+</sup>|
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup>|
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup>|
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup>|
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup>|
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>**Note**: Bubbling is supported since API version 9.|
| longpress | - | Triggered when a component is long pressed. | No<br>**Note**: Bubbling is supported since API version 9.|
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br>> **Note**: For details about **SwipeEvent**, see Table 6.| No<br>**Note**: Bubbling is supported since API version 9.|
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>> **Note**: For details about **PinchEvent**, see Table 7.| No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>> **Note**: For details about **DragEvent**, see Table 8 .| No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No |
> Events not listed in the preceding table are non-bubbling events, such as the [change event](../arkui-js/js-components-basic-input.md#events). For details, see the specific component.
| 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.|
| globalX | number | Horizontal distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.|
| globalY | number | Vertical distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.|
| localX | number | Horizontal distance from the upper left corner of the touched component, which acts as the origin of coordinates. |
| localY | number | Vertical distance from the upper left corner of the touched component, which acts as the origin of coordinates. |
| direction | string | Swiping direction. The value can be one of the following:<br>1. **left**: Swipe from right to left.<br>2. **right**: Swipe from left to right.<br>3. **up**: Swipe upwards.<br>4. **down**: Swipe downwards.|
| distance<sup>6+</sup> | number | Swiping distance in the swiping direction. |
**Table 5** PinchEvent<sup>7+</sup>
| 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** DragEvent<sup>7+</sup> (inherited from BaseEvent)
| Attribute | Type | Description |
| --------- | ------ | ---------------- |
| type | string | Event name. |
| globalX | number | Horizontal distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| globalY | number | Vertical distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| 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.
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.1.4.1.3 "><pid="p8534204622111"><aname="p8534204622111"></a><aname="p8534204622111"></a>Custom attribute set defined through <ahref="js-components-common-attributes.md">data-*</a>.</p>
