1# Crown Event 2A crown event is an event triggered when the crown of a wearable device is rotated. Event dispatch relies on component focus, and you can customize event handling through [focus events](ts-universal-attributes-focus.md). 3 4> **NOTE** 5> 6> - This event is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 7> 8> - Manual rotation of the crown has default interaction logic. For example, rotating the crown causes the scrollbar to scroll in the direction of the rotation. 9> 10> - A component must have focus to receive crown events. Focus control can be managed using [focusable](ts-universal-attributes-focus.md#focusable), [defaultFocus](ts-universal-attributes-focus.md#defaultFocus9), and [focusOnTouch](ts-universal-attributes-focus.md#focusOnTouch9). 11> 12> - This event is only supported on wearable devices. 13> 14> - By default, the following components support crown events: [Slider](ts-basic-components-slider.md), [DatePicker](ts-basic-components-datepicker.md), [TextPicker](ts-basic-components-textpicker.md), [TimePicker](ts-basic-components-timepicker.md), [Scroll](ts-container-scroll.md), [List](ts-container-list.md), [Grid](ts-container-grid.md), [WaterFlow](ts-container-waterflow.md), [ArcList](ts-container-arclist.md), [Refresh](ts-container-refresh.md), and [Swiper](ts-container-swiper.md). 15 16## onDigitalCrown 17 18onDigitalCrown(handler: Optional<Callback<CrownEvent>>): T 19 20Called when the crown is rotated while the component has focus. 21 22**Atomic service API**: This API can be used in atomic services since API version 18. 23 24**System capability**: SystemCapability.ArkUI.ArkUI.Full 25 26 27**Parameters** 28| Name | Type | Mandatory | Description | 29| ---------- | -------------------------------- | ------- | ----------------------------------------- | 30| handler | Optional<Callback<[CrownEvent](#crownevent)>> | Yes | [CrownEvent](#crownevent) object. | 31 32 33**Return value** 34| Type | Description | 35| --------- | ---------------| 36| T | Current component. | 37 38## CrownEvent 39 40Defines a data structure for the crown event received by a component. It includes timestamp, angular velocity, rotation angle, and crown action. 41 42**Atomic service API**: This API can be used in atomic services since API version 18. 43 44**System capability**: SystemCapability.ArkUI.ArkUI.Full 45 46| Name | Type | Description | 47| --------------------- | -------------- | -------------------------------------- | 48| timestamp | number | Timestamp. | 49| angularVelocity | number | Angular velocity in degrees per second (°/s). | 50| degree | number | Relative rotation angle.<br>Unit: degrees<br>Value range: [-360, 360] | 51| action | [CrownAction](ts-appendix-enums.md#crownaction18) | Crown action. | 52| stopPropagation | () => void | Stops event propagation. | 53 54## Example 55This example demonstrates how to register a crown event on a component and receive event data. 56```ts 57// xxx.ets 58@Entry 59@Component 60struct CityList { 61 @State message: string = "onDigitalCrown"; 62 63 build() { 64 Column() { 65 Row(){ 66 Stack() { 67 Text(this.message) 68 .fontSize(20) 69 .fontColor(Color.White) 70 .backgroundColor("#262626") 71 .textAlign(TextAlign.Center) 72 .focusable(true) 73 .focusOnTouch(true) 74 .defaultFocus(true) 75 .borderWidth(2) 76 .width(223).height(223) 77 .borderRadius(110) 78 .onDigitalCrown((event: CrownEvent) => { 79 event.stopPropagation(); 80 this.message = "CrownEvent\n\n" + JSON.stringify(event); 81 console.debug("action:%d, angularVelocity:%f, degree:%f, timestamp:%f", 82 event.action, event.angularVelocity, event.degree, event.timestamp); 83 }) 84 }.width("100%").height("100%") 85 }.width("100%").height("100%") 86 } 87 } 88} 89``` 90 91 92
