Mastering Event Listeners in React

Event listening is the process of creating event listeners in our code to listen for and react to events that happen on our webpage.
Event listeners play a crucial role in handling user interactions in React applications.
"Doing work" in response to "something happening" is known as event handling. Events are the "something the user does" and the "callback function" is the work that will happen in response to the event being triggered.
In this blog I will discuss different types of event listeners that are used in React and give examples on each type.

onClick - Handling Button Click

The onClick event listener is used to handle the click event on an element, such as a button. When the button is clicked, the specified function or method is executed.
Example:

import React from 'react';

const Button = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <button onClick={handleClick}>
     Click me
    </button>
  );
};

export default Button;

In this example, we define a functional component called Button. Inside the component, we declare the handleClick function, which logs a message to the console. The onClick event listener is attached to the element, and when the button is clicked, the handleClick function is called, resulting in the message being logged to the console.

onChange - Handling Input Change

The onChange event listener is used to handle changes in an input element, such as a text field. Whenever the value of the input changes, the specified function or method is called.
Example:

import React from 'react';

const Input = () => {
  const handleChange = (event) => {
    console.log('Input value:', event.target.value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
};

export default Input;

In this example, we have a functional component called Input. Inside the component, we define the handleChange function, which receives the event object. When the value of the input changes, the handleChange function is called, and the current value of the input is logged to the console.

onSubmit - Handling Form Submission

The onSubmit event listener is used to handle form submissions. It is typically used in combination with the

element. When the form is submitted, the specified function or method is executed.
Example:

import React from 'react';
const Form = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

In this example, we define a functional component called Form. Inside the component, we declare the handleSubmit function, which takes the event object as an argument. When the form is submitted, the handleSubmit function is called, and it prevents the default form submission behavior using event.preventDefault(). Finally, a submit button is rendered within the form, and clicking it triggers the form submission and logs a message to the console.

onMouseOver - Handling Mouse Over

The onMouseOver event listener is used to handle the event when the mouse pointer moves over an element. It triggers the specified function or method when the mouse enters the boundaries of the element.
Example:

import React from 'react';

const Box = () => {
  const handleMouseOver = () => {
    console.log('Mouse over the box!');
  };

  return (
    <div onMouseOver={handleMouseOver} 
style={{ width: '200px', height: '200px', background: 'red' }}>
      Hover over me
    </div>
  );
};

export default Box;

In this example, we have a functional component called Box. Inside the component, we define the handleMouseOver function. When the mouse pointer moves over the

element, the handleMouseOver function is called, which logs a message to the console.

onKeyDown - Handling Key Down

The onKeyDown event listener is used to handle keydown events, which occur when a keyboard key is pressed while an element has focus (e.g., an input field). It triggers the specified function or method when a key is pressed.
Example:

import React from 'react';

const Input = () => {
  const handleKeyDown = (event) => {
    console.log('Key pressed:', event.key);
  };

  return (
    <input type="text" onKeyDown={handleKeyDown} />
  );
};

export default Input;

In this example, we define a functional component called Input. Inside the component, we declare the handleKeyDown function, which receives the event object. When a key is pressed within the element, the handleKeyDown function is called, and the pressed key is logged to the console.

As I said at the beginning, the event listeners are very important to understand, because without them it is difficult or impossible for the user to interact with the User interface.
I think this blog will be very useful to the readers and will help you to dive in deeper.