# Keyboard and Mouse Event Keyboard and mouse events refer to the input events of the peripheral keyboard and mouse. ## Mouse Event The supported mouse events include the events triggered by the peripheral mouse and touchpad. Mouse events can trigger the following callbacks. | Name | Description | | ---------------------------------------- | ---------------------------------------- | | onHover(event: (isHover: boolean) => void) | Triggered when the mouse pointer enters or leaves the component.
**isHover**: whether the mouse pointer hovers over the component. The value **true** means that the mouse pointer enters the component, and the value **false** means that the mouse pointer leaves the component.| | onMouse(event: (event?: MouseEvent) => void) | Triggered when the component is clicked by a mouse button or the mouse pointer moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.| When the component is bound to the **onHover** callback, you can use the [hoverEffect](../reference/apis-arkui/arkui-ts/ts-universal-attributes-hover-effect.md) attribute to set the hover effect of the component in hover state. **Figure 1** Mouse event data flow ![en-us_image_0000001511900504](figures/en-us_image_0000001511900504.png) When ArkUI receives the mouse event, it checks whether the mouse event concerns pressing, lifting, or moving of the left mouse button, and then responds accordingly. - Yes: The mouse event is first converted into a touch event in the same position, and a collision test, gesture judgment, and callback response of the touch event are performed. The collision test and callback response of the mouse event are then performed. - No: Only the collision test and callback response of the mouse event are performed. >**NOTE** > >All touch events and gesture events that can be responded to by a single finger may be triggered and responded to by using the left mouse button. For example, to implement page redirection invoked by clicking a button with support for finger touches and left-clicks, you just need to bind one click event (**onClick**). If you want to implement different effects for the finger touch and the left-click, you can use the **source** parameter in the **onClick** callback to determine whether the current event is triggered by a finger or a mouse. ### onHover ```ts onHover(event: (isHover?: boolean) => void) ``` Triggered when the mouse pointer enters or leaves the component. The **isHover** parameter indicates whether the mouse pointer hovers over the component. This event does not support custom bubbling settings. By default, event bubbling occurs between parent and child components. If this API is bound to a component, it is triggered when the mouse pointer enters the component from outside and the value of **isHover** is **true**, or when the mouse pointer leaves the component and the value of **isHover** is **false**. >**NOTE** > >Event bubbling is an event propagation in the document object model (DOM) when an event is first handled by an element and then bubbles up to its parent element. ```ts // xxx.ets @Entry @Component struct MouseExample { @State hoverText: string = 'Not Hover'; @State Color: Color = Color.Gray; build() { Column() { Button(this.hoverText) .width(200).height(100) .backgroundColor(this.Color) .onHover((isHover?: boolean) => { // Use the onHover API to listen for whether the mouse pointer is hovered over the button. if (isHover) { this.hoverText = 'Hovered!'; this.Color = Color.Green; } else { this.hoverText = 'Not Hover'; this.Color = Color.Gray; } }) }.width('100%').height('100%').justifyContent(FlexAlign.Center) } } ``` In this example, a **\