1# Key Event 2 3A key event is triggered when a focusable component, such as **\<Button>**, interacts with a keyboard, remote control, or any other input device with keys. To use a key event for components that are not focusable by default, such as **\<Text>** and **\<Image>**, first set their **focusable** attribute to **true**. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10 11## Events 12 13| Name | Bubbling Supported| Description | 14| ---------------------------------------- | ---- | ---------------------------------------- | 15| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Triggered when a key event occurs. For details about **event**, see [KeyEvent](#keyevent).| 16 17 18## KeyEvent 19 20| Name | Type | Description | 21| ------------------------------------- | ---------------------------------------- | -------------------------- | 22| type | [KeyType](ts-appendix-enums.md#keytype) | Key type. | 23| [keyCode](../apis/js-apis-keycode.md) | number | Key code. | 24| keyText | string | Key value. | 25| keySource | [KeySource](ts-appendix-enums.md#keysource) | Type of the input device that triggers the key event. | 26| deviceId | number | ID of the input device that triggers the key event. | 27| metaKey | number | State of the metakey (that is, the **WIN** key on the Windows keyboard or the **Command** key on the Mac keyboard) when the key is pressed. The value **1** indicates the pressed state, and **0** indicates the unpressed state.| 28| timestamp | number | Timestamp when the key is pressed. | 29| stopPropagation | () => void | Stops the event from bubbling upwards or downwards. | 30 31 32## Example 33 34```ts 35// xxx.ets 36@Entry 37@Component 38struct KeyEventExample { 39 @State text: string = '' 40 @State eventType: string = '' 41 42 build() { 43 Column() { 44 Button('KeyEvent') 45 .onKeyEvent((event: KeyEvent) => { 46 if (event.type === KeyType.Down) { 47 this.eventType = 'Down' 48 } 49 if (event.type === KeyType.Up) { 50 this.eventType = 'Up' 51 } 52 this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText 53 }) 54 Text(this.text).padding(15) 55 }.height(300).width('100%').padding(35) 56 } 57} 58``` 59 60  61
