React Events Reference

Last Updated : 05 Dec, 2023

When the user interacts with the web application events are fired. That event can be a mouse click, a keypress, or something rare like connecting the battery with a charger. From the developer side, we need to ‘listen’ to such events and then make our application respond accordingly. This is called event handling which provides a dynamic interface to a webpage.

Syntax:

onEvent={function}

Now we will look at certain rules to keep in mind while creating events in React.

camelCase Convention: Instead of using lowercase we use camelCase while giving names of the react events. That simply means we write ‘onClick’ instead of ‘onclick’.
Pass the event as a function: In React we pass a function enclosed by curly brackets as the event listener or event handler, unlike HTML where we pass the event handler or event listener as a string.
Prevent the default event: Just returning false inside the JSX element does not prevent the default behavior in react. Instead, we have to call the ‘preventDefault’ method directly inside the event handler function.

Example : In this example we implemented an onClick Event in it.

JavaScript

// App.js

import "./App.css"
const App = () => {
    const function1 = (event) => {
        alert("Click Event Fired")
    }
    return (
        <div className="App">
            <h1>GeeksforGeeks</h1>
            <button onClick={function1}>
                Click Me!
            </button>
        </div>
    );
}
export default App;

CSS

/*App.css*/

.App {
    min-width: 30vw;
    margin: auto;
    text-align: center;
    color: green;
    font-size: 23px;
}

button {
    background-color: lightgray;
    height: 50px;
    width: 150px;
    margin: auto;
    border-radius: 6px;
    cursor: pointer;
}

Output:

Animation2

The Complete list of Events are listed below:

Mouse Events:

In React, handling mouse events is important for creating interactive user interfaces.

Event	Description
onClick	This event fires when user click mouse left button.
onDoubleClick	This event triggers when user click mouse button twice.
onMouseDown	This event occurs when mouse button pressed on any tag.
onMouseUp	This event triggers when button released after press.
onMouseMove	This event occurs when mouse cursor move on a particular tag or element.
onMouseEnter	This event fires when a mouse cursor move inside in a HTML Element.
onMouseLeave	This event occurs when mouse cursor leaves HTML Element boundaries.

Form Event:

In React, handling form events is a crucial part of creating interactive and dynamic user interfaces.

Event	Description
onChange	This event triggers when the value of input tag changes.
onInput	This event fires when the value of input field gets changed.
onSubmit	This event triggers when user submit a form using Submit button.
onFocus	This event fires when user click on any input tag and that tag active to enter data.
onBlur	This event occurs when element is not longer active.

Clipboard Events:

Clipboard events in React allow you to interact with the user's clipboard, providing a way to handle copy, cut, and paste operations.

Event	Description
onCopy	This event occurs when user copy data from any particular element.
onCut	This event occurs when user cut data from any particular element.
onPaste	This event occurs when user paste data from any particular element.

Touch Events:

In React, you can handle touch events to create touch-friendly and mobile-responsive user interfaces.

Event	Description
onTouchStart	This event occurs when a user touches the screen.
onTouchMove	This event fires when user touch and move their finger without removing finger.
onTouchEnd	This event occurs one touch released by user.
onTouchCancel	This event hits when touch cancels by user.

Pointer Events:

Pointer events in React are a set of events that handle different input devices, including mouse, touch, and pen interactions.

Event	Description
onPointerDown	This event works when a pointing device inititates pointing screen.
onPointerMove	This event works when pointing device starts initiating and moving the pointer.
onPointerUp	This event triggers when user released the button from pointing device after pointing a tag.
onPointerCancel	This event occurs when user cancels their touch on screen.

UI Events:

It seems there might be a bit of confusion in your question. The term "UI event" is quite broad and could refer to various types of events that occur in a user interface.

Event	Description
onScroll	This event occurs when user start scrolling the page.
onResize	This event occurs when the size of browser is changed.

Keyboard Events:

In React, you can handle keyboard events using synthetic events provided by React.

Event	Description
onKeyDown	This event occurs when a user presses the key from keyboard.
onKeyPress	This event occurs when a user presses the key from keyboard.
onKeyUp	This event occurs when a user presses and released the key from keyboard.