1# 焦点事件 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。 10 11> **说明：** 12> 13> - 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> - 不支持嵌套滚动组件场景按键走焦。 16> 17> - 存在默认交互逻辑的组件例如[Button](ts-basic-components-button.md)、[TextInput](ts-basic-components-textinput.md)等，默认即为可获焦，[Text](ts-basic-components-text.md)、[Image](ts-basic-components-image.md)等组件默认状态为不可获焦，不可获焦状态下，无法触发焦点事件，需要设置[focusable](ts-universal-attributes-focus.md#focusable)属性为true才可触发。 18> 19> - 对于有获焦能力的容器组件，例如[Stack](ts-container-stack.md)、[Row](ts-container-row.md)等，若不存在可获焦子组件，该容器组件不可获焦。为其配置onClick或是单指单击的Tap手势，且不显式配置focusable属性，该组件会隐式地成为可获焦组件。 20> 21> - 焦点开发及组件获焦能力参考[焦点开发指南](../../../ui/arkts-common-events-focus-event.md)。 22 23## onFocus 24 25onFocus(event: () => void): T 26 27当前组件获取焦点时触发的回调。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| ------ | ----------------------------- | ---- | ------------------ | 37| event | () => void | 是 | onFocus的回调函数，表示组件已获焦。 | 38 39**返回值：** 40 41| 类型 | 说明 | 42| -------- | -------- | 43| T | 返回当前组件。 | 44 45## onBlur 46 47onBlur(event:() => void): T 48 49当前组件失去焦点时触发的回调。 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明 | 58| ------ | ----------------------------- | ---- | ------------------ | 59| event | () => void | 是 | onBlur的回调函数，表示组件已失焦。 | 60 61**返回值：** 62 63| 类型 | 说明 | 64| -------- | -------- | 65| T | 返回当前组件。 | 66 67## 示例 68 69该示例展示了组件获焦和失焦的情况，按钮获焦和失焦时会改变按钮的颜色。 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct FocusEventExample { 76 @State oneButtonColor: string = '#0066FF' 77 @State twoButtonColor: string = '#87CEFA' 78 @State threeButtonColor: string = '#90EE90' 79 80 build() { 81 Column({ space: 20 }) { 82 // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色 83 Button('First Button') 84 .backgroundColor(this.oneButtonColor) 85 .width(260) 86 .height(70) 87 .fontColor(Color.Black) 88 .focusable(true) 89 .onFocus(() => { 90 this.oneButtonColor = '#FFFFFF' 91 }) 92 .onBlur(() => { 93 this.oneButtonColor = '#0066FF' 94 }) 95 Button('Second Button') 96 .backgroundColor(this.twoButtonColor) 97 .width(260) 98 .height(70) 99 .fontColor(Color.Black) 100 .focusable(true) 101 .onFocus(() => { 102 this.twoButtonColor = '#FFFFFF' 103 }) 104 .onBlur(() => { 105 this.twoButtonColor = '#87CEFA' 106 }) 107 Button('Third Button') 108 .backgroundColor(this.threeButtonColor) 109 .width(260) 110 .height(70) 111 .fontColor(Color.Black) 112 .focusable(true) 113 .onFocus(() => { 114 this.threeButtonColor = '#FFFFFF' 115 }) 116 .onBlur(() => { 117 this.threeButtonColor = '#90EE90' 118 }) 119 }.width('100%').margin({ top: 20 }) 120 } 121} 122``` 123 124 
