前言
在我们的ArkTS中有一些通用的事件，他们在所有的组件中都可以用，所以我们需要来学习一下。
获得更好的开发体验和效率！！！
一、点击事件
1.1 基础介绍
组件被点击时触发的事件。
| 名称 | 支持冒泡 | 功能描述 |
| onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该回调，event返回值见ClickEvent对象说明。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
1.2 ClickEvent对象说明
| 名称 | 类型 | 描述 |
| screenX | number | 点击位置相对于应用窗口左上角的X坐标。 |
| screenY | number | 点击位置相对于应用窗口左上角的Y坐标。 |
| x | number | 点击位置相对于被点击元素左上角的X坐标。 |
| y | number | 点击位置相对于被点击元素左上角的Y坐标。 |
| timestamp | number | |
| 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | ||
| target | EventTarget | 触发事件的元素对象显示区域。 |
| source | SourceType | 事件输入设备。 |
1.3 示例代码
// xxx.ets @Entry @Component struct ClickExample { @State text: string = '' build() { Column() { Row({ space: 20 }) { Button('Click').width(100).height(40) .onClick((event: ClickEvent) => { this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; }) Button('Click').width(200).height(50) .onClick((event: ClickEvent) => { this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:' + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp; }) }.margin(20) Text(this.text).margin(15) }.width('100%') } }
二、触摸事件
2.1 基础介绍
组件被点击时触发的事件。
| 名称 | 支持冒泡 | 功能描述 |
| onTouch(event: (event?: TouchEvent) => void) | 是 | 手指触摸动作触发该回调，event返回值见TouchEvent介绍。 |
2.2 ClickEvent对象说明
| 名称 | 类型 | 描述 |
| type | TouchType | 触摸事件的类型。 |
| touches | Array<TouchObject> | 全部手指信息。 |
| changedTouches | Array<TouchObject> | 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp | number | |
| 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | ||
| target | EventTarget | 触发事件的元素对象显示区域。 |
| source | SourceType | 事件输入设备。 |
2.3 示例代码
// xxx.ets @Entry @Component struct TouchExample { @State text: string = '' @State eventType: string = '' build() { Column() { Button('Touch').height(40).width(100) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.eventType = 'Down' } if (event.type === TouchType.Up) { this.eventType = 'Up' } if (event.type === TouchType.Move) { this.eventType = 'Move' } this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.width + '\nheight:' + event.target.area.height }) Button('Touch').height(50).width(200).margin(20) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.eventType = 'Down' } if (event.type === TouchType.Up) { this.eventType = 'Up' } if (event.type === TouchType.Move) { this.eventType = 'Move' } this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.width + '\nheight:' + event.target.area.height }) Text(this.text) }.width('100%').padding(30) } }
二、焦点事件
2.2 基础介绍
焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
| 名称 | 支持冒泡 | 功能描述 |
| onFocus(event: () => void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:() => void) | 否 | 当前组件失去焦点时触发的回调。 |
3.2 示例代码
// xxx.ets @Entry @Component struct FocusEventExample { @State oneButtonColor: string = '#FFC0CB' @State twoButtonColor: string = '#87CEFA' @State threeButtonColor: string = '#90EE90' build() { Column({ space: 20 }) { // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色 Button('First Button') .backgroundColor(this.oneButtonColor) .width(260) .height(70) .fontColor(Color.Black) .focusable(true) .onFocus(() => { this.oneButtonColor = '#FF0000' }) .onBlur(() => { this.oneButtonColor = '#FFC0CB' }) Button('Second Button') .backgroundColor(this.twoButtonColor) .width(260) .height(70) .fontColor(Color.Black) .focusable(true) .onFocus(() => { this.twoButtonColor = '#FF0000' }) .onBlur(() => { this.twoButtonColor = '#87CEFA' }) Button('Third Button') .backgroundColor(this.threeButtonColor) .width(260) .height(70) .fontColor(Color.Black) .focusable(true) .onFocus(() => { this.threeButtonColor = '#FF0000' }) .onBlur(() => { this.threeButtonColor = '#90EE90' }) }.width('100%').margin({ top: 20 }) } }
总结
以上就是今天要讲的内容，本文仅仅简单介绍了点击、触摸、焦点事件，而ArkTS还提供了其他函数，有兴趣地可以自行去看官方文档
