1# Axis Event 2 3An axis event is triggered when a user interacts with a component by scrolling the mouse wheel or swiping two fingers on a touchpad along a specific direction (axis). The term "axis" here refers to the direction in a 2D coordinate system, which includes the horizontal direction (x-axis) and the vertical direction (y-axis). 4 5> **NOTE** 6> 7> This event is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8 9## onAxisEvent 10 11onAxisEvent(event: (event: AxisEvent) => void): T 12 13Called when the mouse wheel is scrolled or two fingers are swiped on a touchpad. 14 15**Widget capability**: This API can be used in ArkTS widgets since API version 18. 16 17**Atomic service API**: This API can be used in atomic services since API version 18. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | --------------------------------- | ---- | -------------------- | 25| event | [AxisEvent](#axisevent) | Yes | [AxisEvent](#axisevent) object.| 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Current component.| 32 33## AxisEvent 34 35Defines an axis event object that inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent8). 36 37**Atomic service API**: This API can be used in atomic services since API version 18. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41### Properties 42 43| Name | Type | Read-Only|Optional | Description | 44| ------------------- | -----------------------|------|----- | -------------------------------------------------------- | 45| action | [AxisAction](ts-appendix-enums.md#axisaction18) | Yes | No | Action type of the axis event. | 46| x | number | Yes | No | X coordinate of the cursor relative to the left edge of the element.<br>Unit: vp | 47| y | number | Yes | No | Y coordinate of the cursor relative to the top edge of the element.<br>Unit: vp | 48| windowX | number | Yes | No | X coordinate of the cursor relative to the upper left corner of the current window.<br>Unit: vp| 49| windowY | number | Yes | No | Y coordinate of the cursor relative to the upper left corner of the current window.<br>Unit: vp| 50| displayX | number | Yes | No | X coordinate of the cursor relative to the upper left corner of the screen.<br>Unit: vp| 51| displayY | number | Yes | No | Y coordinate of the cursor relative to the upper left corner of the current screen.<br>Unit: vp| 52| scrollStep | number | Yes | No | Scroll step length for the mouse wheel.<br> **NOTE**<br>Only the mouse wheel is supported. The value ranges from 0 to 65535.| 53| propagation | Callback\<void> | Yes | No | Callback to activate event bubbling. | 54 55### getHorizontalAxisValue 56 57getHorizontalAxisValue(): number 58 59Obtains the horizontal axis value of this axis event. 60 61**Atomic service API**: This API can be used in atomic services since API version 18. 62 63**System capability**: SystemCapability.ArkUI.ArkUI.Full 64 65**Return value** 66 67| Type |Description | 68| ------- | --------------------------------- | 69| number | Horizontal axis value.| 70 71### getVerticalAxisValue 72 73getVerticalAxisValue(): number 74 75Obtains the vertical axis value of this axis event. 76 77**Atomic service API**: This API can be used in atomic services since API version 18. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81**Return value** 82 83| Type |Description | 84| ------- | --------------------------------- | 85| number | Vertical axis value.| 86 87## Example 88 89This example shows how to set up an axis event on a button. When the user scrolls the mouse wheel over the button, the event parameters are captured and displayed. 90 91```ts 92// xxx.ets 93@Entry 94@Component 95struct AxisEventExample { 96 @State text: string = '' 97 98 build() { 99 Column() { 100 Row({ space: 20 }) { 101 Button('AxisEvent').width(100).height(40) 102 .onAxisEvent((event?: AxisEvent) => { 103 if (event) { 104 this.text = 105 'AxisEvent:' + '\n action:' + event.action + '\n displayX:' + event.displayX + '\n displayY:' + 106 event.displayY + '\n windowX:' + event.windowX + '\n windowY:' + event.windowY + '\n x:' + event.x + 107 '\n y:' + event.y + '\n VerticalAxisValue:' + event.getVerticalAxisValue() + 108 '\n HorizontalAxisValue:' + event.getHorizontalAxisValue() 109 } 110 }) 111 }.margin(20) 112 113 Text(this.text).margin(15) 114 }.width('100%') 115 } 116} 117``` 118 119The figure below shows the event parameters captured when the user scrolls the mouse wheel over the button. 120 121 122
