【ArkTS-通用事件】

■ 基础输入事件

■ 1. onTouch 触摸事件

■ 2. onHover 鼠标悬浮

■ 3. onMouse 鼠标事件

■ 4. onAxisEvent 轴事件

轴事件指组件被鼠标滚轮滚动或触控板双指沿特定方向（轴）滑动时触发的事件。“轴”指二维坐标系中的方向，分为水平（X轴）和垂直（Y轴）。

■ 5. onKeyEvent 按键事件

是指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于默认不可获焦的组件，如Text，Image等，可以将focusable属性设置为true后使用按键事件。

■ 6. onDigitalCrown 表冠事件

■ 7. onFocusAxisEvent 焦点轴事件

■ 交互响应事件

■ 1. onClick 点击事件

点击动作触发该回调。

// xxx.ets
@Entry
@Component
struct ClickExample {@State text: string = '';build() {Column() {Row({ space: 20 }) {Button('Click').width(100).height(40).id('click1').onClick((event?: ClickEvent) => {if(event){this.text = 'Click Point:' + '\n  windowX:' + event.windowX + '\n  windowY:' + event.windowY+ '\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 + '\n  id:'+ event.target.id+ '\ntargetDisplayId:' + event.targetDisplayId + '\ntimestamp' + event.timestamp;}}, 20)Button('Click').width(200).height(50).id('click2').onClick((event?: ClickEvent) => {if(event){this.text = 'Click Point:' + '\n  windowX:' + event.windowX + '\n  windowY:' + event.windowY+ '\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 + '\n  id:'+ event.target.id+ '\ntargetDisplayId:' + event.targetDisplayId + '\ntimestamp' + event.timestamp;}}, 20)}.margin(20)Text(this.text).margin(15)}.width('100%')}
}

■ 2. 拖拽事件

拖拽事件是指在用户界面中，当用户拖动某个对象（如文件、控件或元素）时触发的一系列事件。
这些事件允许开发者自定义拖拽行为，实现诸如拖放、调整位置等功能。

属性	描述
onDragStart
onDragEnter	拖拽进入组件范围内时，触发回调，当监听了onDrop事件时，此事件才有效。
onDragMove	拖拽在组件范围内移动时，触发回调，当监听了onDrop事件时，此事件才有效。
onDragLeave	拖拽离开组件范围内时，触发回调，当监听了onDrop事件时，此事件才有效。
onDrop
onDragEnd
onPreDrag

■ 3. 焦点事件

当前组件获取焦点时触发的回调。

属性	描述
onFocus	焦点事件
onBlur	失去焦点时触发

■ 4. 悬浮事件

属性	描述
onHover	鼠标或手写笔进入或退出组件时，触发hover事件。
onPreDrag

■ 5. 交互事件分发控制

属性	描述
onTouchIntercept	自定义事件拦截, 给组件绑定自定义事件拦截回调。
onChildTouchTest	自定义事件分发, 当前组件通过设置回调，可自定义触摸测试并控制触摸测试中的子节点行为。

■ 6. 组件变化事件-挂载卸载事件

属性	描述
onAttach	组件挂载到组件树时触发此回调。
onDetach	组件从组件树卸载时触发此回调。
onAppear	组件挂载显示后触发此回调。
onDisAppear	组件从组件树卸载消失时触发此回调。

■ 7. 组件变化事件

■ onAreaChange 组件区域变化事件

组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调

// xxx.ets
@Entry
@Component
struct AreaExample {@State value: string = 'Text'@State sizeValue: string = ''build() {Column() {Text(this.value).backgroundColor(Color.Green).margin(30).fontSize(20).onClick(() => {this.value = this.value + 'Text'}).onAreaChange((oldValue: Area, newValue: Area) => {console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)this.sizeValue = JSON.stringify(newValue)})Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })}.width('100%').height('100%').margin({ top: 30 })}
}

■ onSizeChange 组件尺寸变化事件

// xxx.ets
@Entry
@Component
struct AreaExample {@State value: string = 'Text'@State sizeValue: string = ''build() {Column() {Text(this.value).backgroundColor(Color.Green).margin(30).fontSize(20).onClick(() => {this.value = this.value + 'Text'}).onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {console.info(`Ace: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)this.sizeValue = JSON.stringify(newValue)})Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })}.width('100%').height('100%').margin({ top: 30 })}
}

■ onVisibleAreaChange 组件可见区域变化事件

■ 示例1 (使用onVisibleAreaChange来监听区域变化)

// xxx.ets
@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller()private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]@State testTextStr: string = 'test'@State testRowStr: string = 'test'build() {Column() {Column() {Text(this.testTextStr).fontSize(20)Text(this.testRowStr).fontSize(20)}.height(100).backgroundColor(Color.Gray).opacity(0.3)Scroll(this.scroller) {Column() {Text("Test Text Visible Change").fontSize(20).height(200).margin({ top: 50, bottom: 20 }).backgroundColor(Color.Green)// 通过设置ratios为[0.0, 1.0]，实现当组件完全显示或完全消失在屏幕中时触发回调。.onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {console.info('Test Text isExpanding: ' + isExpanding + ', currentRatio:' + currentRatio)if (isExpanding && currentRatio >= 1.0) {console.info('Test Text is fully visible. currentRatio:' + currentRatio)this.testTextStr = 'Test Text is fully visible'}if (!isExpanding && currentRatio <= 0.0) {console.info('Test Text is completely invisible.')this.testTextStr = 'Test Text is completely invisible'}})Row() {Text('Test Row Visible  Change').fontSize(20).margin({ bottom: 20 })}.height(200).backgroundColor(Color.Yellow).onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {console.info('Test Row isExpanding:' + isExpanding + ', currentRatio:' + currentRatio)if (isExpanding && currentRatio >= 1.0) {console.info('Test Row is fully visible.')this.testRowStr = 'Test Row is fully visible'}if (!isExpanding && currentRatio <= 0.0) {console.info('Test Row is completely invisible.')this.testRowStr = 'Test Row is completely invisible'}})ForEach(this.arr, (item:number) => {Text(item.toString()).width('90%').height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ top: 10 })}, (item:number) => (item.toString()))}.width('100%')}.backgroundColor(0x317aff).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarColor(Color.Gray).scrollBarWidth(10).onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {console.info(xOffset + ' ' + yOffset)}).onScrollEdge((side: Edge) => {console.info('To the edge')}).onScrollStop(() => {console.info('Scroll Stop')})}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}

■ 示例2 (使用onVisibleAreaApproximateChange来监听区域变化)

// xxx.ets
@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller()private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]@State testTextStr: string = 'test'@State testRowStr: string = 'test'build() {Column() {Column() {Text(this.testTextStr).fontSize(20)Text(this.testRowStr).fontSize(20)}.height(100).backgroundColor(Color.Gray).opacity(0.3)Scroll(this.scroller) {Column() {Text("Test Text Visible Change").fontSize(20).height(200).margin({ top: 50, bottom: 20 }).backgroundColor(Color.Green)// 通过设置ratios为[0.0, 1.0]，实现当组件完全显示或完全消失在屏幕中时触发回调。.onVisibleAreaApproximateChange({ratios: [0.0, 1.0], expectedUpdateInterval: 1000}, (isExpanding: boolean, currentRatio: number) => {console.info('Test Text isExpanding: ' + isExpanding + ', currentRatio:' + currentRatio)if (isExpanding && currentRatio >= 1.0) {console.info('Test Text is fully visible. currentRatio:' + currentRatio)this.testTextStr = 'Test Text is fully visible'}if (!isExpanding && currentRatio <= 0.0) {console.info('Test Text is completely invisible.')this.testTextStr = 'Test Text is completely invisible'}})Row() {Text('Test Row Visible  Change').fontSize(20).margin({ bottom: 20 })}.height(200).backgroundColor(Color.Yellow).onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {console.info('Test Row isExpanding:' + isExpanding + ', currentRatio:' + currentRatio)if (isExpanding && currentRatio >= 1.0) {console.info('Test Row is fully visible.')this.testRowStr = 'Test Row is fully visible'}if (!isExpanding && currentRatio <= 0.0) {console.info('Test Row is completely invisible.')this.testRowStr = 'Test Row is completely invisible'}})ForEach(this.arr, (item:number) => {Text(item.toString()).width('90%').height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ top: 10 })}, (item:number) => (item.toString()))}.width('100%')}.backgroundColor(0x317aff).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarColor(Color.Gray).scrollBarWidth(10).onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {console.info(xOffset + ' ' + yOffset)}).onScrollEdge((side: Edge) => {console.info('To the edge')}).onScrollStop(() => {console.info('Scroll Stop')})}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}

■ 设置事件回调

设置事件回调

■ 1. setOnClick

■ 2. setOnTouch

■ 3. setOnAppear

■ 4. setOnDisappear

■ 5. setOnKeyEvent

■ 6. setOnFocus

■ 7. setOnBlur

■ 8. setOnHover

■ 9. setOnMouse

■ 10. setOnSizeChange

■ 11. setOnVisibleAreaApproximateChange

■ 12. HoverCallback