What are other event handlers?

In addition to onClick, React provides a variety of event handlers that allow you to respond to different user interactions. Here’s a concise overview of some commonly used event handlers:

Common React Event Handlers

1. onChange: Triggered when the value of an input, textarea, or select element changes.

   function handleChange(event) {
     console.log(event.target.value);
   }
   
   <input type="text" onChange={handleChange} />

2. onSubmit: Used with forms to handle the submission event.

   function handleSubmit(event) {
     event.preventDefault(); // Prevents the default form submission
     console.log('Form submitted');
   }
   
   <form onSubmit={handleSubmit}>
     <button type="submit">Submit</button>
   </form>

3. onMouseEnter and onMouseLeave: Triggered when the mouse enters or leaves an element, useful for hover effects.

   function handleMouseEnter() {
     console.log('Mouse entered');
   }
   
   <div onMouseEnter={handleMouseEnter}>Hover over me!</div>

4. onFocus and onBlur: Triggered when an element gains or loses focus, respectively.

   function handleFocus() {
     console.log('Input focused');
   }
   
   <input onFocus={handleFocus} />

5. onKeyDown, onKeyUp, and onKeyPress: Handle keyboard events when a key is pressed down, released, or pressed, respectively.

   function handleKeyDown(event) {
     console.log('Key pressed:', event.key);
   }
   
   <input onKeyDown={handleKeyDown} />

6. onScroll: Triggered when an element is scrolled.

   function handleScroll() {
     console.log('Scrolled!');
   }
   
   <div onScroll={handleScroll} style={{ overflowY: 'scroll', height: '100px' }}>
     {/* Content here */}
   </div>

Encouraging Further Learning

To explore more about event handling in React, consider checking out the official React documentation on Handling Events. This will provide you with detailed examples and best practices.

If you have any specific events in mind or need further clarification, feel free to ask!