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