1# Focus Axis Event 2 3A focus axis event is an event triggered by interacting with a game controller through the directional pad or joystick. This type of event is dispatched to the component that currently has focus and are then passed back to the application. Components that are focusable by default, such as **Button**, do not require additional attributes to handle focus axis events. For components that are not focusable by default, such as **Text** and **Image**, you can enable focus axis events by setting the **focusable** attribute to **true**. 4 5> **NOTE** 6> 7> The focus axis event is supported since API version 15. Updates will be marked with a superscript to indicate their earliest API version. 8 9## onFocusAxisEvent 10 11onFocusAxisEvent(event: Callback\<FocusAxisEvent>): T 12 13Triggered when any operation is performed with the game controller's directional pad or joystick on the bound component. 14 15**Atomic service API**: This API can be used in atomic services since API version 15. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | ----------------------------- | ---- | ------------------ | 23| event | [FocusAxisEvent](#focusaxisevent) | Yes | **FocusAxisEvent** object.| 24 25**Return value** 26 27| Type| Description| 28| -------- | -------- | 29| T | Current component.| 30 31## FocusAxisEvent 32 33Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent8). 34 35**Atomic service API**: This API can be used in atomic services since API version 15. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name | Type | Description | 40| ------------------------------------- | ---------------------------------------- | --------------------------- | 41| axisMap | Map<[AxisModel](ts-appendix-enums.md#axismodel15), number> | Axis value table of the focus axis event. | 42| stopPropagation | Callback\<void> | Stops a key event from bubbling upwards or downwards. | 43 44## Example 45 46This example demonstrates how to set up a focus axis event on a button. When the button gains focus, operating the game controller's directional pad or joystick will trigger the **onFocusAxisEvent** callback. 47 48```ts 49// xxx.ets 50@Entry 51@Component 52struct FocusAxisEventExample { 53 @State text: string = '' 54 @State axisValue: string = '' 55 56 aboutToAppear(): void { 57 this.getUIContext().getFocusController().activate(true) 58 } 59 60 aboutToDisappear(): void { 61 this.getUIContext().getFocusController().activate(false) 62 } 63 64 build() { 65 Column() { 66 Button('FocusAxisEvent') 67 .defaultFocus(true) 68 .onFocusAxisEvent((event: FocusAxisEvent) => { 69 let absX = event.axisMap.get(AxisModel.ABS_X); 70 let absY = event.axisMap.get(AxisModel.ABS_Y); 71 let absZ = event.axisMap.get(AxisModel.ABS_Z); 72 let absRz = event.axisMap.get(AxisModel.ABS_RZ); 73 let absGas = event.axisMap.get(AxisModel.ABS_GAS); 74 let absBrake = event.axisMap.get(AxisModel.ABS_BRAKE); 75 let absHat0X = event.axisMap.get(AxisModel.ABS_HAT0X); 76 let absHat0Y = event.axisMap.get(AxisModel.ABS_HAT0Y); 77 this.axisValue = 'absX: ' + absX + '; absY: ' + absY + '; absZ: ' + absZ + '; absRz: ' + absRz + '; absGas: ' + absGas + '; absBrake: ' + absBrake + '; absHat0X: ' + absHat0X + '; absHat0Y: ' + absHat0Y; 78 this.text = JSON.stringify(event); 79 }) 80 Text(this.axisValue).padding(15) 81 Text(this.text).padding(15) 82 }.height(300).width('100%').padding(35) 83 } 84} 85``` 86 87When the game controller's joystick is moved, the **onFocusAxisEvent** callback is triggered, and the axis values are updated accordingly. 88 89 90
