How Events Work in React | Lecture 134 | React.JS 🔥
Summary
TLDRThis lecture delves into how React handles events and their underlying mechanisms, starting with a primer on event propagation and delegation in the DOM to lay the groundwork for understanding React's approach. It explains the process of events bubbling through the DOM tree and introduces the concept of event delegation for efficient event handling across multiple elements. The discussion transitions to React's unique handling of events, highlighting the use of synthetic events to normalize browser inconsistencies and the practice of attaching event handlers to the root container for performance gains. The lecture concludes by contrasting event handling in React with vanilla JavaScript, emphasizing differences in syntax, event object handling, and phase capturing.
Takeaways
- 👣 Events in the browser follow a propagation pattern: capturing phase (top to target) and bubbling phase (target to top).
- 🎯 By default, event handlers listen to events during the bubbling phase, allowing parent elements to handle child events.
- 🧩 Event delegation allows handling events for multiple elements in one central place, improving performance and memory usage.
- 🃏 In React, event handlers are registered to the root DOM container, not individual elements, utilizing event delegation behind the scenes.
- ⚡ React creates a synthetic event object, a wrapper around the native DOM event, to fix browser inconsistencies and ensure consistent event behavior.
- 🔀 React bubbles focus, blur, and change events, which normally don't bubble, except for the scroll event.
- 🐫 React uses camelCase for event handler prop names (e.g., onClick), unlike vanilla JavaScript (onclick or click).
- 🚫 To prevent default browser behavior in React, use event.preventDefault(), as returning false from the handler doesn't work.
- 🔍 Attach 'Capture' to the event handler name (e.g., onClickCapture) to handle events in the capturing phase, though rarely used.
- 🧠 Understanding event propagation and React's event handling mechanisms helps diagnose and fix strange event-related behaviors in applications.
Q & A
What is event propagation in the context of the DOM?
-Event propagation is the process by which an event travels through the DOM tree. It starts at the root of the document, goes down to the target element during the capturing phase, and then bubbles back up to the root during the bubbling phase.
How does event delegation work in the DOM and why is it useful?
-Event delegation is a technique where event listeners are added to a parent element instead of individual child elements. It's useful for handling events on multiple elements in one central place, improving app performance and memory usage, especially with a large number of elements.
How does React handle events differently from vanilla JavaScript?
-React handles events by registering all event handler functions to the root DOM container of the React app instead of directly on the target element. This approach allows React to perform event delegation automatically for all events in applications.
What is the significance of the capturing and bubbling phases in event propagation?
-The capturing and bubbling phases are important for understanding how events travel through the DOM tree. The capturing phase is when the event travels down to the target element, and the bubbling phase is when it travels back up. This process allows for more flexible event handling strategies.
Why might you want to prevent an event from bubbling in a React application?
-Preventing an event from bubbling can be necessary to stop the event from being handled by parent elements' event handlers when such behavior is not desired. It's done by calling the stopPropagation method on the event object, although it's rarely necessary.
What are synthetic events in React and why are they used?
-Synthetic events in React are wrappers around the browser's native event objects. They provide a consistent interface across different browsers, fixing browser inconsistencies and including some additional functionalities. This makes event handling in React more reliable and consistent.
How does React's event handling improve app performance?
-React's event handling improves app performance by using event delegation at the root DOM container. This means React only needs to register one event handler per event type, reducing the number of event listeners and simplifying event management across the application.
In React, how can you stop the default behavior triggered by an event?
-In React, to stop the default behavior triggered by an event, you must call the preventDefault method on the synthetic event object. Returning false from an event handler function, as you might in vanilla JavaScript, does not work.
What is the difference between the way event handlers are named in React and in vanilla JavaScript?
-In React, event handler props are named using camelCase, like onClick, while in HTML it would be all lowercase (onclick), and in vanilla JavaScript addEventListener method, the event is referred to simply by its type, like 'click', without the 'on' prefix.
How can you handle an event in the capturing phase instead of the bubbling phase in React?
-In React, to handle an event in the capturing phase, you can attach 'Capture' to the event handler name, for example, using onClickCapture instead of just onClick. This allows you to catch events in the capturing phase rather than the default bubbling phase.
Outlines
🌐 Understanding Events in React
This section transitions from the topics of rendering and state management in React to focus on event handling, which is crucial yet less discussed. It begins with a refresher on how event propagation and delegation work in the traditional Document Object Model (DOM), illustrating the process of event capturing and bubbling. The narrative then moves to explain the significance of understanding these concepts for React developers, given that many might not be fully aware of how events operate in a browser context. The example of clicking a button within a DOM tree is used to elucidate how events originate, propagate, and can be managed through event handlers and the stopPropagation method, both in vanilla JavaScript and React.
🔍 React's Event Handling Mechanism
This part delves into the nuances of handling events in React applications, raising the question of why understanding traditional event delegation is necessary when React seems to abstract these details away. It explains React's approach to event handling, which involves attaching event handlers not to the individual elements but to the root DOM container of the React application. This section highlights how React internally employs event delegation for performance optimization by bundling multiple event handlers and attaching them to the root of the fiber tree. It emphasizes the automatic and invisible nature of this process, which enhances application performance without the developer's active intervention. The discussion underscores the distinction between the component tree and the DOM tree in React, advising developers to consider the latter when thinking about event propagation.
🛠 React's Synthetic Events and Differences from Vanilla JavaScript
The final segment introduces React's synthetic events, which are wrappers around native DOM event objects designed to normalize browser inconsistencies and extend functionalities. It outlines the characteristics of synthetic events, including their interface and methods like stopPropagation and preventDefault, and notes the exception of certain events that do not bubble in React, such as the scroll event. The narrative contrasts event handling in React with vanilla JavaScript, covering differences in naming conventions, the inability to use return false to prevent default actions in React, and the provision for handling events during the capturing phase. The summary encapsulates the practical knowledge necessary for working with events in React and reassures developers of the underlying complexities being managed by React behind the scenes.
Mindmap
Keywords
💡Event Propagation
💡Event Delegation
💡DOM Tree
💡Synthetic Events
💡stopPropagation
💡preventDefault
💡onClick
💡Root Container
💡Fiber Tree
💡onClickCapture
Highlights
React handles events behind the scenes by delegating them to the root DOM container, rather than registering event handlers directly on the target elements.
Event propagation and event delegation in the DOM are essential concepts for understanding how React handles events.
During event propagation, events travel down the DOM tree (capturing phase), reach the target element, and then travel back up (bubbling phase).
By default, event handlers in React listen to events during the bubbling phase.
Event delegation allows handling events for multiple elements in one central place, improving performance and memory usage.
React physically registers one event handler function per event type at the root node of the fiber tree during the render phase.
React's synthetic events are wrappers around the DOM's native event objects, fixing browser inconsistencies and ensuring events work the same way across browsers.
Important synthetic event methods, like stopPropagation and preventDefault, have the same interface as native event objects.
In React, event handler props are named using camelCase (e.g., onClick), while in HTML and vanilla JavaScript, they are named differently (onclick, click).
To prevent the browser's default behavior in React, you must call preventDefault on the synthetic event object, rather than returning false from the event handler.
React provides the option to attach event handlers for the capturing phase by adding 'Capture' to the event handler name (e.g., onClickCapture).
Understanding event bubbling and delegation in React can help diagnose and fix strange behaviors related to events in applications.
React's event handling mechanism is designed to make applications more performant by leveraging event delegation and synthetic events.
The DOM tree, not the component tree, is crucial for understanding event bubbling in React applications.
Mastering event handling in React provides confidence and proficiency in working with events in applications.
Transcripts
Let's now leave the topics of rendering and state,
and turn towards another essential part
of React applications that we haven't
really talked about yet, and that's events.
So in this lecture, we will learn how React handles events,
and how they work behind the scenes,
but let's start with a quick refresher
on how event propagation and event delegation
work in the DOM,
because this is important to understand how React works,
and also, because I believe that many people
don't have a good grasp on how events
actually work in the browser.
So let's consider this tree of DOM elements,
and note that this really is a DOM tree,
so not a fiber tree or a React element tree.
And now, let's say that some event happens,
like a click on one of the three buttons,
and so here is what's gonna happen in the browser.
As soon as the event fires,
a new event object will be created,
but it will not be created where the click
actually happened.
Instead, the object will be created
at the root of the document,
so at the very top of the tree.
From there, the event will then travel down the entire tree
during the so-called capturing phase,
all the way, until it reaches the target element,
and the target element is simply the element
on which the event was actually first triggered.
So at the target, we can choose to handle the event
by placing an event handler function on that element,
which usually is exactly what we do.
Then immediately after the target element has been reached,
the event object travels all the way back up the entire tree
during the so-called bubbling phase.
Now, there are two very important things
to understand about this process.
The first is that during the capturing and bubbling phase,
the event really goes through every single child
and parent element one by one.
In fact, it's if the event originated
or happened in each of these DOM elements.
The second important thing is that by default,
event handlers listen to events
not only on the target element,
but also during the bubbling phase,
so if we put these two things together,
it means that every single event handler in a parent element
will also be executed during the bubbling phase
as long as it's also listening for the same type of event.
For example, if we edit another click event handler
to the header element,
then during this whole process,
both the handlers at the target and the header element
would be executed when the click happens.
Now, sometimes we actually don't want this behavior,
and so in that case, we can prevent the event
from bubbling up any further simply by calling
the stopPropagation method on the event object,
and this works in vanilla JavaScript, and also in React,
but it's actually very rarely necessary,
so only use this if there really is no other solution.
Okay, so this is essentially how events work in the browser.
Now, the fact that events bubble like this
allows developers to implement a very common
and very useful technique called event delegation.
So with event delegation, we can handle events
for multiple elements in one central place,
which is one of the parent elements.
So imagine that instead of three buttons,
there would be like, 1,000 buttons.
Now, if we wanted to handle events on all of them,
each button would have to have its own copy
of the event handler function,
which could become problematic
for the app's performance and memory usage.
So instead, by using event delegation,
we can simply add just one handler function
to the first parent element of these buttons.
Then when a click happens on one of the buttons,
the event will bubble up to the options div in this example
where we can then use the events target property
in order to check whether the event originated
from one of the buttons or not,
and if it did, we can then handle the event
in this central event handler function.
Now, if you took my JavaScript course,
then you will already know how to do this in practice,
because in fact, we do this all the time
in vanilla JavaScript applications.
However, in React apps, it's actually not so common
for us to use this technique,
but that might leave you wondering,
if this is actually not important in React,
then why are we even talking about this?
Well, for two reasons.
First, because sometimes you find some strange behaviors
related to events in your applications,
which might actually have to do with event bubbling,
and so as a good React developer,
you always want to understand exactly what's going on
in order to fix these problems,
and the second reason is that this is actually
what React does behind the scenes with our events,
and so let's take a look at that.
So let's consider this same DOM tree,
and let's say again that we want to attach
an event handler to one of the buttons,
or even to some other DOM element,
and this is what that would look like in React code.
So we would simply use the onClick prop
to listen for click events, and then pass it a function.
So that's really easy, right?
Now, if we think about how React
actually registers these event handlers behind the scenes,
we might believe that it would look something like this.
So React might select a button,
and then add the event handler to that element,
so that sounds pretty logical, right?
However, this is actually not what React does internally.
Instead, what React actually does is to register this
and all other event handler functions
to the root DOM container,
and that root container is simply the DOM element
in which the React app is displayed.
So if we use the default of Create React App,
that's usually the div element with an ID set to route.
So again, instead of selecting the button
where we actually placed our event handler,
we can imagine that React selects the route element,
and then adds all our event handlers to that element,
and I say imagine, because the way React
does all this behind the scenes is actually
a lot more complex than this,
but that's not really worth diving into here.
The only thing that's worth knowing
is that React physically registers
one event handler function per event type,
and it does so at the root note of the fiber tree
during the render phase.
So if we have multiple onClick handlers in our code,
React we'll actually somehow bundle them all together
and just add one big onClick handler
to the root node of the fiber tree,
and so this is yet another important function
of the fiber tree,
but anyway, what this means is that behind the scenes,
React actually performs event delegation
for all events in our applications.
So we can say that React delegates all events
to the root DOM container,
because that's where they will actually get handled,
not in the place where we thought we registered them,
and so this works exactly how we just learned
in the previous slide.
So again, whenever a click happens on the button,
a new event object is fired off,
which will then travel down the DOM tree
until it reaches the target element.
From there, the event will bubble back up.
Then as soon as the event reaches the root container
where React registered all our handlers,
the event will actually finally get handled
according to whatever handlers match the event
and the target element.
And finally, once that's all done,
the event, of course, continues bubbling up
until it disappears into nowhere,
and the beauty of this is that it all happens automatically
and invisibly just to make our React apps
yet a little bit more performant.
Now, just one small detail that I want you to notice
is that it's really the DOM tree that matters here,
not the component tree.
So just because one component is a child
of another component,
that doesn't mean that the same is true
in the displayed DOM tree.
So just keep that in mind when thinking
about bubbling in React applications.
All right, so we talked a lot about events
and event objects,
and so now, let's finish by taking a look
at how these event objects actually work behind the scenes.
So whenever we declare an event handler like this one,
React gives us access to the event object
that was created, just like in vanilla JavaScript.
However, in React, this event object is actually different.
So in vanilla JavaScript, we simply get access
to the native DOM event object, for example,
pointer event, mouse event, keyboard event, and many others.
React, on the other hand, will give us something
called a synthetic event,
which is basically a thin wrapper
around the DOM'S native event object,
and by wrapper we simply mean that synthetic events
are pretty similar to native event objects,
but they just add or change some functionalities
on top of them.
So these synthetic events have the same interface
as native event objects,
and that includes the important methods,
stopPropagation, and preventDefault.
What's special about synthetic events though,
and one of the reasons why the React team
decided to implement them is the fact
that they fix some browser inconsistencies,
making it so that events work in the exact same way
in all browsers.
The React team also decided that all
of the most important synthetic events actually bubble,
including the focus, blur, and change events,
which usually do not bubble.
The only exception here is the scroll event,
which does also not bubble in React.
Okay, and now to finish, I want to quickly mention
some differences between how event handlers work
in React and vanilla JavaScript.
The first one is that in React, the prop name
to attach an event handler are named using camelCase,
so something like onClick with an upper case C.
In HTML, on the other hand,
it would be onclick, all lower case,
and if we used an addEventListener in vanilla JavaScript,
the event would simply be called click,
so without the on prefix.
Now, in vanilla JavaScript,
whenever we want to stop the default behavior
of the browser in response to an event,
we can return faults from the event handler function,
and the big example of that is the browser
automatically reloading the page when we submit a form.
However, if we would attempt to return faults
in a React event handler, that would simply not work.
So in React, the only way to prevent the browser's default
behavior is to call preventDefault
on the synthetic event object.
And finally, in the rare event that you need
to handle an event in the capturing phase
rather than in the bubbling phase,
you can simply attach Capture to the event handler name,
for example, onClickCapture instead of just onClick,
but most likely, you will never use this,
so just keep this somewhere in the back of your mind.
All right, so what we just learned in this slide
is basically everything that you need to know in practice
in order to successfully work with events in React.
The rest all happens invisibly behind the scenes,
but I hope that you also found the rest
of the lecture interesting,
and that it gave you even more confidence
in working with events in your applications.
浏览更多相关视频
Multiple ways of Fetching Events in React #knowledgekeen
A Complete Overview of JavaScript Events - All You Need To Know
jQuery Crash Course [2] - Events
Handling Events | Mastering React: An In-Depth Zero to Hero Video Series
Learn JavaScript Event Listeners In 18 Minutes
Every React Concept Explained in 12 Minutes
5.0 / 5 (0 votes)