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. Sequential keyboard navigation is not supported for nested scrollable components.
10>
11>  - Components that have default interaction logic, such as [Button](ts-basic-components-button.md) and [TextInput](ts-basic-components-textinput.md), are focusable by default. Other components, such as [Text](ts-basic-components-text.md) and [Image](ts-basic-components-image.md), 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## onFocus
14
15onFocus(event: () => void)
16
17Triggered when the current component obtains focus.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21## onBlur
22
23onBlur(event:() => void)
24
25Triggered when the current component loses focus.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29
30## Example
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct FocusEventExample {
37  @State oneButtonColor: string = '#FFC0CB'
38  @State twoButtonColor: string = '#87CEFA'
39  @State threeButtonColor: string = '#90EE90'
40
41  build() {
42    Column({ space: 20 }) {
43      // 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.
44      Button('First Button')
45        .backgroundColor(this.oneButtonColor)
46        .width(260)
47        .height(70)
48        .fontColor(Color.Black)
49        .focusable(true)
50        .onFocus(() => {
51          this.oneButtonColor = '#FF0000'
52        })
53        .onBlur(() => {
54          this.oneButtonColor = '#FFC0CB'
55        })
56      Button('Second Button')
57        .backgroundColor(this.twoButtonColor)
58        .width(260)
59        .height(70)
60        .fontColor(Color.Black)
61        .focusable(true)
62        .onFocus(() => {
63          this.twoButtonColor = '#FF0000'
64        })
65        .onBlur(() => {
66          this.twoButtonColor = '#87CEFA'
67        })
68      Button('Third Button')
69        .backgroundColor(this.threeButtonColor)
70        .width(260)
71        .height(70)
72        .fontColor(Color.Black)
73        .focusable(true)
74        .onFocus(() => {
75          this.threeButtonColor = '#FF0000'
76        })
77        .onBlur(() => {
78          this.threeButtonColor = '#90EE90'
79        })
80    }.width('100%').margin({ top: 20 })
81  }
82}
83```
84
85 ![focus](figures/focus.png)
86