Debug School

rakesh kumar
rakesh kumar

Posted on

List down different type of events in react js

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>
Enter fullscreen mode Exit fullscreen mode

Change Event:
The onChange event is triggered when the value of an input or select element changes.

<input type="text" onChange={handleChange} />
Enter fullscreen mode Exit fullscreen mode

Submit Event:
The onSubmit event is triggered when a form is submitted.

<form onSubmit={handleSubmit}>
  // Form fields
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Mouse Events:

onMouseEnter: Triggered when the mouse enters an element.
onMouseLeave: Triggered when the mouse leaves an element.
Enter fullscreen mode Exit fullscreen mode 
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
  Hover over me
</div>
Enter fullscreen mode Exit fullscreen mode

Key Events:

onKeyDown: Triggered when a key is pressed.
onKeyUp: Triggered when a key is released.
Enter fullscreen mode Exit fullscreen mode 
<input type="text" onKeyDown={handleKeyDown} />
Enter fullscreen mode Exit fullscreen mode

Focus Events:

onFocus: Triggered when an element gains focus.
onBlur: Triggered when an element loses focus.
Enter fullscreen mode Exit fullscreen mode 
<input type="text" onFocus={handleFocus} onBlur={handleBlur} />
Enter fullscreen mode Exit fullscreen mode

Touch Events:

onTouchStart: Triggered when a touch event starts.
onTouchEnd: Triggered when a touch event ends.
Enter fullscreen mode Exit fullscreen mode 
<div onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
  Touch me
</div>
Enter fullscreen mode Exit fullscreen mode

Scroll Event:
The onScroll event is triggered when an element is scrolled.

<div onScroll={handleScroll}>Scrollable content</div>
Enter fullscreen mode Exit fullscreen mode

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)