---
# System prepended metadata

title: Here are 30 commonly used React

---

Here are 30 commonly used React events:

### **1. onClick**
- **Description**: Triggered when the user clicks on an element.
- **Usage Example**:
  ```jsx
  <button onClick={handleClick}>Click Me</button>
  ```

### **2. onChange**
- **Description**: Triggered when the value of an input element changes.
- **Usage Example**:
  ```jsx
  <input type="text" onChange={handleChange} />
  ```

### **3. onSubmit**
- **Description**: Triggered when a form is submitted.
- **Usage Example**:
  ```jsx
  <form onSubmit={handleSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
  ```

### **4. onKeyDown**
- **Description**: Triggered when a key is pressed down.
- **Usage Example**:
  ```jsx
  <input type="text" onKeyDown={handleKeyDown} />
  ```

### **5. onKeyUp**
- **Description**: Triggered when a key is released.
- **Usage Example**:
  ```jsx
  <input type="text" onKeyUp={handleKeyUp} />
  ```

### **6. onKeyPress** (Deprecated)
- **Description**: Triggered when a key is pressed down and released.
- **Usage Example**:
  ```jsx
  <input type="text" onKeyPress={handleKeyPress} />
  ```

### **7. onFocus**
- **Description**: Triggered when an element gains focus.
- **Usage Example**:
  ```jsx
  <input type="text" onFocus={handleFocus} />
  ```

### **8. onBlur**
- **Description**: Triggered when an element loses focus.
- **Usage Example**:
  ```jsx
  <input type="text" onBlur={handleBlur} />
  ```

### **9. onMouseEnter**
- **Description**: Triggered when the mouse pointer enters the element.
- **Usage Example**:
  ```jsx
  <div onMouseEnter={handleMouseEnter}>
    Hover over me!
  </div>
  ```

### **10. onMouseLeave**
- **Description**: Triggered when the mouse pointer leaves the element.
- **Usage Example**:
  ```jsx
  <div onMouseLeave={handleMouseLeave}>
    Hover over me!
  </div>
  ```

### **11. onMouseDown**
- **Description**: Triggered when the mouse button is pressed down.
- **Usage Example**:
  ```jsx
  <button onMouseDown={handleMouseDown}>Press me</button>
  ```

### **12. onMouseUp**
- **Description**: Triggered when the mouse button is released.
- **Usage Example**:
  ```jsx
  <button onMouseUp={handleMouseUp}>Release me</button>
  ```

### **13. onMouseMove**
- **Description**: Triggered when the mouse pointer moves over an element.
- **Usage Example**:
  ```jsx
  <div onMouseMove={handleMouseMove}>
    Move the mouse over me!
  </div>
  ```

### **14. onDoubleClick**
- **Description**: Triggered when the user double-clicks on an element.
- **Usage Example**:
  ```jsx
  <button onDoubleClick={handleDoubleClick}>Double Click Me</button>
  ```

### **15. onScroll**
- **Description**: Triggered when an element's scroll position changes.
- **Usage Example**:
  ```jsx
  <div onScroll={handleScroll} style={{ overflow: 'auto', height: '200px' }}>
    Scroll inside me!
  </div>
  ```

### **16. onWheel**
- **Description**: Triggered when the user scrolls using the mouse wheel.
- **Usage Example**:
  ```jsx
  <div onWheel={handleWheel}>
    Scroll with the mouse wheel!
  </div>
  ```

### **17. onCopy**
- **Description**: Triggered when content is copied.
- **Usage Example**:
  ```jsx
  <textarea onCopy={handleCopy}></textarea>
  ```

### **18. onPaste**
- **Description**: Triggered when content is pasted.
- **Usage Example**:
  ```jsx
  <textarea onPaste={handlePaste}></textarea>
  ```

### **19. onDrag**
- **Description**: Triggered when an element is being dragged.
- **Usage Example**:
  ```jsx
  <div draggable onDrag={handleDrag}>
    Drag me!
  </div>
  ```

### **20. onDragStart**
- **Description**: Triggered when the user starts dragging an element.
- **Usage Example**:
  ```jsx
  <div draggable onDragStart={handleDragStart}>
    Start dragging me!
  </div>
  ```

### **21. onDragEnd**
- **Description**: Triggered when the user stops dragging an element.
- **Usage Example**:
  ```jsx
  <div draggable onDragEnd={handleDragEnd}>
    Stop dragging me!
  </div>
  ```

### **22. onDrop**
- **Description**: Triggered when a dragged element is dropped.
- **Usage Example**:
  ```jsx
  <div onDrop={handleDrop}>
    Drop here!
  </div>
  ```

### **23. onContextMenu**
- **Description**: Triggered when the right mouse button is clicked to open the context menu.
- **Usage Example**:
  ```jsx
  <div onContextMenu={handleContextMenu}>
    Right-click me!
  </div>
  ```

### **24. onInput**
- **Description**: Triggered when the value of an input element is received.
- **Usage Example**:
  ```jsx
  <input type="text" onInput={handleInput} />
  ```

### **25. onLoad**
- **Description**: Triggered when an image or other media is loaded.
- **Usage Example**:
  ```jsx
  <img src="image.jpg" onLoad={handleLoad} alt="Example" />
  ```

### **26. onError**
- **Description**: Triggered when there is an error during the loading of an image or other media.
- **Usage Example**:
  ```jsx
  <img src="invalid.jpg" onError={handleError} alt="Example" />
  ```

### **27. onSelect**
- **Description**: Triggered when text is selected inside an element.
- **Usage Example**:
  ```jsx
  <input type="text" onSelect={handleSelect} />
  ```

### **28. onTouchStart**
- **Description**: Triggered when a touch point is placed on the touch surface.
- **Usage Example**:
  ```jsx
  <div onTouchStart={handleTouchStart}>
    Touch me!
  </div>
  ```

### **29. onTouchMove**
- **Description**: Triggered when a touch point moves along the touch surface.
- **Usage Example**:
  ```jsx
  <div onTouchMove={handleTouchMove}>
    Move your touch!
  </div>
  ```

### **30. onTouchEnd**
- **Description**: Triggered when a touch point is removed from the touch surface.
- **Usage Example**:
  ```jsx
  <div onTouchEnd={handleTouchEnd}>
    Lift your finger!
  </div>
  ```

Written by [Tech Hunter](https://x.com/1techhunter)
You can contact me on  [LinkedIn](https://www.linkedin.com/in/nwankwo-stephanie-4ba1311a7/://)