Event Handling: Accessing Details and Preventing Default Behavior

1. The React SyntheticEvent Object

In the previous lesson, you saw this function signature:

function handleChange(event) {
  // ...
}

Whenever you trigger an event in a React application (like a click or a key press), your event handler function automatically receives one argument. By convention, we call it event or simply e.

This object isn't the standard event object that browsers provide. Instead, it's a React SyntheticEvent. This is a cross-browser wrapper around the native browser event. It's beneficial because it guarantees that the event object will have a consistent interface and behavior across all browsers (like Chrome, Firefox, Safari, etc.), saving you from having to write code to handle browser-specific quirks.

This synthetic event object is packed with useful information. The image below shows what it looks like when you log it to the console after a click.

As you can see, it has properties like type (which would be 'click' in this case) and, most importantly, target.

2. Accessing Event Details with event.target

The event.target property is arguably the most useful piece of information on the event object. It refers to the DOM element that initiated the event. Once you have the target, you can read any of its properties, such as its value, name, or id.

Reading Input Value

We already saw this in action with onChange in our last lesson. When you type into an <input> field, event.target is the input element itself, and event.target.value is the current text inside it.

Let's watch a short video that recaps this and introduces the event object more formally.

Handling Multiple Inputs

Imagine a form with fields for a username, email, and password. You could create three separate state variables and three separate handler functions. However, a more scalable pattern is to use a single state object and a single handler function.

We can achieve this by giving each <input> a name attribute that matches a key in our state object. Then, inside our handler, we can use event.target.name to know which input is being changed and event.target.value to get its new value.

This technique is extremely common in React. The following video explains it brilliantly.

Here's a breakdown of the code pattern you just saw. Given a state object like this:

const [formData, setFormData] = useState({
  username: '',
  email: ''
});

And inputs like this:

<input name="username" value={formData.username} onChange={handleChange} />
<input name="email" value={formData.email} onChange={handleChange} />

Your single handleChange function would look like this:

function handleChange(e) {
  const { name, value } = e.target; // Destructuring name and value from the target
  
  setFormData(prevFormData => ({
    ...prevFormData, // Copy the old state
    [name]: value     // Overwrite the key matching the input's name with its new value
  }));
}

The [name]: value part is a computed property name. It's a powerful JavaScript feature that lets you use a variable as a property key in an object literal.

3. Preventing Default Browser Behavior

Some browser events have a default action associated with them. The classic example is the submit event on a <form> element. By default, when you submit a form (either by clicking a <button type="submit"> or pressing Enter in an input field), the browser will attempt to send the form data to a server and will reload the page.

In a React application, this is almost never what you want. You want to handle the submission using JavaScript without a page refresh. To stop this default browser behavior, you can call the preventDefault() method on the event object.

Let's see this in action. The following two clips demonstrate event.preventDefault() in the context of a form's onSubmit handler.

So, a typical form submission handler will look like this:

function handleSubmit(event) {
  // 1. Prevent the page from reloading
  event.preventDefault();

  // 2. Do something with the form data, e.g., log it or send it to an API
  console.log('Form submitted with data:', formData);
}

4. Stopping Event Propagation

There's another important method on the event object: stopPropagation(). To understand it, you first need to understand "event bubbling".

When you click on a button, you're also technically clicking on its parent div, its parent's parent, and so on, all the way up to the document itself. Event bubbling is the process where the event "bubbles" up the DOM tree, triggering any event handlers on its ancestor elements along the way.

Sometimes, this is undesirable. You might want to handle an event on a child element without triggering the same event handler on its parent. To do this, you can call event.stopPropagation().

As the documentation states, it's crucial not to confuse these two methods:

• event.preventDefault(): Prevents the browser's default action for that specific event (e.g., a form submitting).
• event.stopPropagation(): Prevents the event from bubbling up to parent elements.

They are unrelated and solve different problems. You'll use preventDefault() far more often, but knowing that stopPropagation() exists is essential for handling complex UI interactions.

Conclusion

You've now mastered the event object, a cornerstone of interactivity in React. You've gone from simply attaching handlers to precisely controlling them.

Key Takeaways:

• Event handlers receive a SyntheticEvent object, which provides a consistent, cross-browser API.
• event.target is your gateway to the DOM element that triggered the event, allowing you to access properties like value and name.
• You can manage multiple inputs with a single handler by using the name attribute and computed property names ([name]: value).
• event.preventDefault() is essential for stopping default browser actions, particularly to prevent page reloads on form submission.
• event.stopPropagation() can be used to prevent an event from "bubbling" up and triggering handlers on parent elements.

Next Up:

We've covered how to attach handlers and how to process the event they generate. The next logical step, which we've already started doing, is to use this information to update our component's state. In the next lesson, we will focus entirely on the different patterns for updating component state in response to user events, solidifying the connection between user actions and a dynamic UI.