Universal Events

NOTE

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.

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

NOTE

Events not listed in the preceding table do not support bubbling, such as the change event of the <input> component. For details, see the description of the specific component.

Table 1 BaseEvent

Table 2 TouchEvent (inherited from BaseEvent)

Table 3 TouchInfo

Table 4 SwipeEvent (inherited from BaseEvent)

Table 5 PinchEvent⁷⁺

Table 6 DragEvent⁷⁺ (inherited from BaseEvent)

Target⁶⁺

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.

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}`);
  }
}

DataTransfer⁹⁺

Use dataTransfer to transfer data during the drag operation, so you can perform operations on the data when the drag operation is complete.

setData⁹⁺

setData(key: string, value: object): boolean

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

Parameters

Return value

Example

// value in setData can be of a primitive type.
dragStart(e) {
	var isSetOk = e.dataTransfer.setData('name', 1);
},
// value in setData can be of the object type.
dragStart(e) {
	var person = new Object();
	person.name = "tom";
	person.age = 21;
	var isSetOk = e.dataTransfer.setData('person', person);
}

getData⁹⁺

getData(key: string): object

Obtains the data associated with the specified key. If no data is associated with the key, an empty string will be returned.

Parameters

Return value

Example

dragStart(e) {
	var person = new Object();
	person.name = "tom";
	person.age = 21;
	e.dataTransfer.setData('person', person);
},
dragEnd(e){
	var person = e.dataTransfer.getData('person');
},

clearData⁹⁺

clearData(key?: string): boolean

Deletes data associated with the specified key. If there is no data associated with the key, this API will not have any effect. If the key is null, all data will be deleted.

Parameters

Return value

Example

dragEnd(e) {
	var isSuccess = e.dataTransfer.clearData('name');
}

setDragImage⁹⁺

setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean

Sets a custom drag image.

Parameters

Return value

Example

import image from '@ohos.multimedia.image';

export default {
    createPixelMap() {
        let color = new ArrayBuffer(4 * 96 * 96);
        var buffer = new Uint8Array(color);
        for (var i = 0; i < buffer.length; i++) {
            buffer[i] = (i + 1) % 255;
        }
        let opts = {
            alphaType: 0,
            editable: true,
            pixelFormat: 4,
            scaleMode: 1,
            size: {
                height: 96, width: 96
            }
        }
        const promise = image.createPixelMap(color, opts);
        promise.then((data) => {
            console.error('-create pixmap has info message:' + JSON.stringify(data));
            this.pixelMap = data;
            this.pixelMapReader = data;
        })
    },

    onInit() {
        this.createPixelMap
    },

    dragStart(e) {
        e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
    }
}