8 Handling events in React
This chapter covers
- Reacting to user input using events
- Handling event capturing and bubbling
- Managing default event actions
- Attaching event listeners directly to the HTML
Events are the way that users interact with a JavaScript web application. Events can be caused by mouse movement or clicking, touch interface clicks and drags, keyboard button presses, scrolling, copying and pasting, as well as indirect interactions such as focusing and unfocusing elements or the entire application.
So far we have created React applications with very little user interaction. We have handled clicking a button here and there, but not really talked in depth about how the click event works, and how we as developers handle it. We are going to change that in this chapter, which is dedicated to event handling.
You can think of events as the way to handle inputs from a user. Our web application creates JSX which is converted to HTML. The user then interacts with that HTML, and the result of those interactions are events dispatched from the HTML elements to our React application. This simple flow of information is illustrated in figure 8.1.