Introduction to Event Handling

Why is event handling important?

The interaction between a user and the interface is a fundamental part of developing applications with complex user interfaces, especially with events.

When we click a button, something happens. When we write text into an input field, something happens. When we select an element from a list, something happens. In vanilla JavaScript, the browser provides us with the addEventListener() and removeEventListener() methods. In React, however, you can safely ignore them in most use cases. React provides its own system to define user interaction and does so with inline events.

These inline events resemble HTML attributes for example:

<button onclick="myFunction" />

However, they work entirely differently.

We know this is a little frustrating. For years, web developers have labored away and learned that event listeners should be neatly separated from the markup - separation of concerns anyone? But React introduces a very different way of dealing with events.

Behind the scenes, React handles much of the hard work and enables us to safely and easily stay in the component context by allowing the definition of event handlers as class methods. Layout logic and behavioral logic are encapsulated in a single component, meaning we do not have to jump between many different controllers or views.