1# 焦点事件 2 3焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。 4 5> **说明：** 6> 7> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 目前仅支持通过外接键盘的tab键、方向键触发。 10> 11> - 存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦，不可获焦状态下，无法触发焦点事件，需要设置focusable属性为true才可触发。 12 13 14## 事件 15 16| **名称** | **支持冒泡** | **功能描述** | 17| ---------------------------------------- | -------- | --------------- | 18| onFocus(event: () => void) | 否 | 当前组件获取焦点时触发的回调。 | 19| onBlur(event:() => void) | 否 | 当前组件失去焦点时触发的回调。 | 20 21 22## 示例 23 24```ts 25// xxx.ets 26@Entry 27@Component 28struct FocusEventExample { 29 @State oneButtonColor: string = '#FFC0CB' 30 @State twoButtonColor: string = '#87CEFA' 31 @State threeButtonColor: string = '#90EE90' 32 33 build() { 34 Column({ space: 20 }) { 35 // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色 36 Button('First Button') 37 .backgroundColor(this.oneButtonColor) 38 .width(260) 39 .height(70) 40 .fontColor(Color.Black) 41 .focusable(true) 42 .onFocus(() => { 43 this.oneButtonColor = '#FF0000' 44 }) 45 .onBlur(() => { 46 this.oneButtonColor = '#FFC0CB' 47 }) 48 Button('Second Button') 49 .backgroundColor(this.twoButtonColor) 50 .width(260) 51 .height(70) 52 .fontColor(Color.Black) 53 .focusable(true) 54 .onFocus(() => { 55 this.twoButtonColor = '#FF0000' 56 }) 57 .onBlur(() => { 58 this.twoButtonColor = '#87CEFA' 59 }) 60 Button('Third Button') 61 .backgroundColor(this.threeButtonColor) 62 .width(260) 63 .height(70) 64 .fontColor(Color.Black) 65 .focusable(true) 66 .onFocus(() => { 67 this.threeButtonColor = '#FF0000' 68 }) 69 .onBlur(() => { 70 this.threeButtonColor = '#90EE90' 71 }) 72 }.width('100%').margin({ top: 20 }) 73 } 74} 75``` 76 77 
