1# Focus Event 2 3A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component. 4 5> **NOTE** 6> 7> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event. 10> 11> - Components that have default interaction logic, such as **\<Button>** and **\<TextInput>**, are focusable by default. Other components, such as **\<Text>** and **\<Image>**, are not focusable by default. Only focusable components can trigger a focus event. To enable a component to be focusable, set its **focusable** attribute to **true**. 12 13 14## Events 15 16| Name | Bubbling Supported| Description | 17| ---------------------------------------- | -------- | --------------- | 18| onFocus(event: () => void) | No | Triggered when the current component obtains focus.| 19| onBlur(event:() => void) | No | Triggered when the current component loses focus.| 20 21 22## Example 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 // You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back. 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  78
