■ 基础输入事件

■ 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 @ComponentstructClickExample{@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. 拖拽事件

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

■ 3. 焦点事件

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

■ 4. 悬浮事件

■ 5. 交互事件分发控制

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

■ 7. 组件变化事件

■ onAreaChange 组件区域变化事件

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

// xxx.ets@Entry @ComponentstructAreaExample{@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 @ComponentstructAreaExample{@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 @ComponentstructScrollExample{scroller:Scroller=newScroller()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 @ComponentstructScrollExample{scroller:Scroller=newScroller()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