1# Universal Events 2 3> **NOTE** 4> 5> Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7## Event Description 8 9- 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. 10 11- The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters. 12 13 14Different from private events, universal events can be bound to most components. 15 16 17| Name | Parameter | Description | Bubbling Supported | Capturing Supported | 18| ------------------------ | ---------- | ------------------------------------------------------------ | ----------------------------------------------------- | --------------- | 19| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> | Yes<sup>5+</sup>| 20| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> | Yes<sup>5+</sup>| 21| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> | Yes<sup>5+</sup>| 22| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> | Yes<sup>5+</sup>| 23| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> | No | 24| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. | No | 25| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9. | No | 26| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component. For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9. | No | 27| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No | No | 28| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No | No | 29| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No | No | 30| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No | No | 31| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No | No | 32| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No | No | 33| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No | No | 34| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No | No | 35| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No | No | 36| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No | No | 37| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | No | 38| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No | No | 39| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No | 40 41 42> **NOTE** 43> 44> Events not listed in the preceding table do not support bubbling, such as the [change event](../arkui-js/js-components-basic-input.md#events) of the **<input\>** component. For details, see the description of the specific component. 45 46**Table 1** BaseEvent 47 48| Attribute | Type | Description | 49| --------------------- | -------------------- | --------------------------- | 50| type | string | Event type, such as **click** and **longpress**.| 51| timestamp | number | Timestamp when the event is triggered. | 52| deviceId<sup>6+</sup> | number | ID of the device that triggers the event. | 53| target<sup>6+</sup> | [Target](#target6)| Target object that triggers the event. | 54 55**Table 2** TouchEvent (inherited from BaseEvent) 56 57| Attribute | Type | Description | 58| -------------- | ---------------------- | ---------------------------------------- | 59| touches | Array<TouchInfo> | Attribute set of the touch event, including the information array of the touch points on the screen. | 60| 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, including changes in the number and location of touch points. For example, when the user's finger leaves the screen, which means that the number of touch points changes from 1 to 0, **changedTouches** has the relevant data generated, but not **touches**.| 61 62**Table 3** TouchInfo 63 64| Attribute | Type | Description | 65| ------------------ | ------ | ------------------------------ | 66| globalX | number | Horizontal distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.| 67| globalY | number | Vertical distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.| 68| localX | number | Horizontal distance from the upper left corner of the touched component, which acts as the origin of coordinates. | 69| localY | number | Vertical distance from the upper left corner of the touched component, which acts as the origin of coordinates. | 70| size | number | Touch area. | 71| force<sup>6+</sup> | number | Touch force. | 72 73**Table 4** SwipeEvent (inherited from BaseEvent) 74 75| Attribute | Type | Description | 76| --------------------- | ------ | ---------------------------------------- | 77| direction | string | Swiping direction. The value can be one of the following:<br>- **left**: Swipe left.<br>- **right**: Swipe right.<br>- **up**: Swipe up.<br>- **down**: Swipe down.| 78| distance<sup>6+</sup> | number | Swiping distance in the swiping direction. | 79 80**Table 5** PinchEvent<sup>7+</sup> 81 82| Attribute | Type | Description | 83| ------------ | ------ | -------------- | 84| scale | number | Scale factor. | 85| pinchCenterX | number | X-coordinate of the pinch center, in px.| 86| pinchCenterY | number | Y-coordinate of the pinch center, in px.| 87 88**Table 6** DragEvent<sup>7+</sup> (inherited from BaseEvent) 89 90| Attribute | Type | Description | 91| ------------------------- | -------------------------------- | ---------------- | 92| type | string | Event name. | 93| globalX | number | Horizontal distance from the upper left corner of the screen, which acts as the origin of coordinates.| 94| globalY | number | Vertical distance from the upper left corner of the screen, which acts as the origin of coordinates.| 95| timestamp | number | Timestamp. | 96| dataTransfer<sup>9+</sup> | [DataTransfer](#datatransfer9)| Object for data transfer. | 97 98## Target<sup>6+</sup> 99 100When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object. 101 102 103 104| Attribute | Type | Description | 105| -------------------- | ------ | ---------------------------------------- | 106| dataSet<sup>6+</sup> | Object | Custom attribute set defined through [data-*](../arkui-js/js-components-common-attributes.md).| 107 108**Example** 109 110```html 111<!-- xxx.hml --> 112<div> 113 <div data-a="dataA" data-b="dataB" 114 style="width: 100%; height: 50%; background-color: saddlebrown;"@touchstart='touchstartfunc'></div> 115</div> 116``` 117 118```js 119// xxx.js 120export default { 121 touchstartfunc(msg) { 122 console.info(`on touch start, point is: ${msg.touches[0].globalX}`); 123 console.info(`on touch start, data is: ${msg.target.dataSet.a}`); 124 } 125} 126``` 127 128## DataTransfer<sup>9+</sup> 129 130Use **dataTransfer** to transfer data during the drag operation, so you can perform operations on the data when the drag operation is complete. 131 132### setData<sup>9+</sup> 133 134setData(key: string, value: object): boolean 135 136Sets the data associated with the specified key. If there is no data associated with the key, the data will be appended. If there is already data associated with the key, the data will replace the existing data in the same position. 137 138**Parameters** 139 140| Name | Type | Mandatory | Description | 141| ----- | ------ | ---- | ------- | 142| key | string | Yes | Data key. | 143| value | object | Yes | Data to be stored.| 144 145**Return value** 146 147| Type | Description | 148| ------- | ------------------------ | 149| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| 150 151**Example** 152 153```js 154// value in setData can be of a primitive type. 155dragStart(e) { 156 var isSetOk = e.dataTransfer.setData('name', 1); 157}, 158// value in setData can be of the object type. 159dragStart(e) { 160 var person = new Object(); 161 person.name = "tom"; 162 person.age = 21; 163 var isSetOk = e.dataTransfer.setData('person', person); 164} 165``` 166### getData<sup>9+</sup> 167 168getData(key: string): object 169 170Obtains the data associated with the specified key. If no data is associated with the key, an empty string will be returned. 171 172**Parameters** 173 174| Name | Type | Mandatory | Description | 175| ---- | ------ | ---- | ----- | 176| key | string | Yes | Data key.| 177 178**Return value** 179 180| Type | Description | 181| ------ | ------ | 182| object | Obtained data.| 183 184**Example** 185 186```js 187dragStart(e) { 188 var person = new Object(); 189 person.name = "tom"; 190 person.age = 21; 191 e.dataTransfer.setData('person', person); 192}, 193dragEnd(e){ 194 var person = e.dataTransfer.getData('person'); 195}, 196``` 197### clearData<sup>9+</sup> 198 199clearData(key?: string): boolean 200 201Deletes data associated with the specified key. If there is no data associated with the key, this API will not have any effect. 202If the key is null, all data will be deleted. 203 204**Parameters** 205 206| Name | Type | Mandatory | Description | 207| ---- | ------ | ---- | ----- | 208| key | string | No | Data key.| 209 210**Return value** 211 212| Type | Description | 213| ------- | ------------------------ | 214| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| 215 216**Example** 217 218```js 219dragEnd(e) { 220 var isSuccess = e.dataTransfer.clearData('name'); 221} 222``` 223### setDragImage<sup>9+</sup> 224 225setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean 226 227Sets a custom drag image. 228 229**Parameters** 230 231| Name | Type | Mandatory | Description | 232| -------- | -------- | ---- | ---------------------------------------- | 233| pixelmap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | Image transferred from the frontend.| 234| offsetX | number | Yes | Horizontal offset relative to the image. | 235| offsetY | number | Yes | Vertical offset relative to the image. | 236 237**Return value** 238 239| Type | Description | 240| ---- | ------------------------ | 241| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| 242 243**Example** 244 245```js 246import image from '@ohos.multimedia.image'; 247 248export default { 249 createPixelMap() { 250 let color = new ArrayBuffer(4 * 96 * 96); 251 var buffer = new Uint8Array(color); 252 for (var i = 0; i < buffer.length; i++) { 253 buffer[i] = (i + 1) % 255; 254 } 255 let opts = { 256 alphaType: 0, 257 editable: true, 258 pixelFormat: 4, 259 scaleMode: 1, 260 size: { 261 height: 96, width: 96 262 } 263 } 264 const promise = image.createPixelMap(color, opts); 265 promise.then((data) => { 266 console.error('-create pixmap has info message:' + JSON.stringify(data)); 267 this.pixelMap = data; 268 this.pixelMapReader = data; 269 }) 270 }, 271 272 onInit() { 273 this.createPixelMap 274 }, 275 276 dragStart(e) { 277 e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50); 278 } 279} 280``` 281