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| intentionCode<sup>10+</sup> | [IntentionCode](../apis/js-apis-intentioncode.md) | Intention corresponding to the key. | 31 32 33## Example 34 35```ts 36// xxx.ets 37@Entry 38@Component 39struct KeyEventExample { 40 @State text: string = '' 41 @State eventType: string = '' 42 43 build() { 44 Column() { 45 Button('KeyEvent') 46 .onKeyEvent((event?: KeyEvent) => { 47 if(event){ 48 if (event.type === KeyType.Down) { 49 this.eventType = 'Down' 50 } 51 if (event.type === KeyType.Up) { 52 this.eventType = 'Up' 53 } 54 this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText + '\nintentionCode:' + event.intentionCode 55 } 56 }) 57 Text(this.text).padding(15) 58 }.height(300).width('100%').padding(35) 59 } 60} 61``` 62 63  64
