通用事件

说明：

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

事件说明

• 事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互；

• 事件回调函数中通过参数可以携带额外的信息，如组件上的数据对象dataset，事件特有的回调参数。

相对于私有事件，大部分组件都可以绑定如下事件。

说明： 除上述事件外，其他事件均为非冒泡事件，如input的change事件，详见各个组件。

表1 BaseEvent对象属性列表

表2 TouchEvent对象属性列表(继承BaseEvent)

表3 TouchInfo

表4 SwipeEvent 基础事件对象属性列表（继承BaseEvent）

表5 PinchEvent 对象属性列表⁷⁺

表6 DragEvent对象属性列表(继承BaseEvent)⁷⁺

Target对象⁶⁺

当组件触发事件后，事件回调函数默认会收到一个事件对象，通过该事件对象可以获取相应的信息。

示例：

<!-- 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对象⁹⁺

在拖拽操作的过程中，可以通过dataTransfer对象来传输数据，以便在拖拽操作结束的时候对数据进行其他操作。

setData⁹⁺

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

设置给定key关联的数据。如果没有与该key关联的数据，则将其添加到末尾。如果该key关联的数据已经存在，则在相同位置替换现有数据。

参数：

返回值：

示例：

// setData的value参数，可以是基本数据类型。
dragStart(e) {
	var isSetOk = e.dataTransfer.setData('name', 1);
},
// setData的value参数，也可以是对象类型。
dragStart(e) {
	var person = new Object();
	person.name = "tom";
	person.age = 21;
	var isSetOk = e.dataTransfer.setData('person', person);
}

getData⁹⁺

getData(key: string): object

获取给定key关联的数据，如果没有与该key关联的数据，则返回空字符串。

参数：

返回值：

示例：

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

删除给定key关联的数据。如果没有与该key关联的数据，则该方法不会产生任何效果。 如果key为空，则删除所有数据。

参数：

返回值：

示例：

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

setDragImage⁹⁺

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

用于设置自定义的拖动图像。

参数：

返回值：

示例：

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