In React.js, you can handle various types of events using event handlers. Here are some commonly used event types in React with examples:
Click Event:
The onClick event is triggered when an element is clicked.
<button onClick={handleClick}>Click Me</button>
Change Event:
The onChange event is triggered when the value of an input or select element changes.
<input type="text" onChange={handleChange} />
Submit Event:
The onSubmit event is triggered when a form is submitted.
<form onSubmit={handleSubmit}>
// Form fields
<button type="submit">Submit</button>
</form>
Mouse Events:
onMouseEnter: Triggered when the mouse enters an element.
onMouseLeave: Triggered when the mouse leaves an element.
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
Hover over me
</div>
Key Events:
onKeyDown: Triggered when a key is pressed.
onKeyUp: Triggered when a key is released.
<input type="text" onKeyDown={handleKeyDown} />
Focus Events:
onFocus: Triggered when an element gains focus.
onBlur: Triggered when an element loses focus.
<input type="text" onFocus={handleFocus} onBlur={handleBlur} />
Touch Events:
onTouchStart: Triggered when a touch event starts.
onTouchEnd: Triggered when a touch event ends.
<div onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
Touch me
</div>
Scroll Event:
The onScroll event is triggered when an element is scrolled.
<div onScroll={handleScroll}>Scrollable content</div>
These are just a few examples of the different types of events you can handle in React.js. React provides a comprehensive set of event handlers that cover a wide range of user interactions. You can attach event handlers to elements and define corresponding functions to handle those events and update the state or perform other actions in response to user input.
Top comments (0)