Multiple ways of Fetching Events in React #knowledgekeen
Summary
TLDRIn this informative video, Wasim from Knowledge Scheme returns after a hiatus to discuss event handling in React. He explains the concept of synthetic events and demonstrates three methods to bind events to HTML elements. Wasim also covers how to prevent default behaviors like redirection in links and emphasizes the importance of understanding JavaScript's event handling framework for deeper insights into React's synthetic events. The video promises to make learning React more engaging by connecting it with core JavaScript principles.
Takeaways
- 😀 The video is from the 'knowledge scheme' channel and is presented by Wasim, who apologizes for a delay in posting due to recent events.
- 🔄 The channel is back on track and will have no more delays, moving forward with new topics in React.
- 📚 The video focuses on 'fetching events' in React, building on the previous discussion about synthetic events.
- 🔑 An 'event' is defined as something that happens when a user interacts with a browser, like clicking a button.
- 📝 Event handling in React is similar to traditional DOM event handling, with the use of event listeners and handlers.
- 🔍 The video explains how to track which button is clicked among multiple buttons using event properties like 'event.target'.
- 🛠️ Three methods of binding events to elements are discussed: inline function, passing an event object, and using the '.bind()' method.
- 🔄 The first method involves writing a straightforward function for the event without additional parameters.
- 📌 The second method allows passing additional parameters to the event handler function along with the event object.
- 👨💻 The third method, less commonly used, involves binding the event to the handler function using '.bind()'.
- 🚫 The importance of using 'event.preventDefault()' is highlighted to avoid default behaviors like redirection in anchor tags.
- 🔑 Additional event methods like 'event.stopPropagation()' are mentioned for controlling event bubbling and capturing.
Q & A
What is the main topic of the video?
-The main topic of the video is about fetching events in React and how to handle them.
Why was there a delay in posting the video?
-The presenter, Wasim, mentions that there were a few things going on recently that prevented him from making and editing videos, which caused the delay.
What is a synthetic event in React?
-A synthetic event in React is a cross-browser wrapper around the browser’s native event. It is used to handle events in React applications.
How can you determine which button was clicked in a React application?
-You can determine which button was clicked by passing the event object to your method and using properties like `event.target` to identify the clicked element.
What are the three ways to bind events to elements in React?
-The three ways to bind events in React are: 1) Using an inline function, 2) Passing the event as a parameter to a function, and 3) Using the `.bind()` method to force an event binding.
Why is it necessary to fetch the event object in event handling?
-Fetching the event object is necessary to access details about the event, such as the target element, and to perform actions like preventing the default behavior of an element.
How can you prevent the default behavior of an anchor tag in React?
-You can prevent the default behavior of an anchor tag by calling `event.preventDefault()` within the event handler function.
What is the purpose of the 'stop propagation' method in event handling?
-The 'stop propagation' method is used to prevent an event from bubbling up the event chain, which can be useful for stopping events from reaching parent elements.
What does the presenter mean by 'React adds its own layer of synthetic events'?
-This means that React provides a unified interface for handling events across different browsers, abstracting away the differences in how browsers implement native events.
How can you pass additional parameters to an event handler function in React?
-You can pass additional parameters to an event handler function by including them in the function call when binding the event to an element.
What does the presenter suggest for viewers who want to dive deeper into event handling?
-The presenter suggests that viewers who want to dive deeper into event handling should learn about the event handling and event listening concepts of JavaScript, as React builds upon these core JavaScript frameworks.
Outlines
🎥 React Event Handling Introduction
The script begins with the host, Wasim, welcoming viewers back to the 'Knowledge Scheme' channel after a long hiatus due to personal reasons. He assures that the channel is now back on track with no further delays. The main topic introduced is React event handling, specifically how to fetch events. Wasim explains the concept of events in React, such as clicks and mouse events, and how they are triggered in the browser. He emphasizes the importance of understanding these events for effective React development and hints at exploring the capture of specific event details in subsequent content.
🔍 Exploring Event Fetching in React
In this paragraph, Wasim delves into the specifics of fetching events in React. He demonstrates how to bind events to elements like buttons and divs and how to identify which element triggered the event. Wasim introduces the concept of using 'event' objects to capture details about the event, such as the target element. He also explains three different methods to handle events in HTML elements, providing examples of how to implement each method and the importance of understanding which button or element is being interacted with by the user.
📌 Understanding Event Properties and Methods
Wasim continues the discussion on event handling by explaining the properties and methods available within the 'event' object. He illustrates how to use 'event.target' to determine the element that was clicked and how to differentiate between multiple buttons or elements with the same event handler. The paragraph also touches on the creation of callbacks and the potential issues with reusing event handlers without creating new ones for each element, suggesting the importance of unique event handlers for each element.
🛑 Preventing Default Behavior with Events
Here, Wasim provides an example of preventing the default behavior of an anchor tag, which is to navigate to a new URL when clicked. He explains the use of 'event.preventDefault()' to stop this default action and keep the user on the current page. The explanation includes how to apply this method to an event handler to create a link that performs an action without redirecting. This part of the script highlights the control developers have over user interactions through event handling.
🌐 Conclusion and Future JavaScript Sessions
In the final paragraph, Wasim wraps up the video by emphasizing the importance of understanding events and event handling in JavaScript for deeper knowledge. He mentions that future videos will cover event handling concepts in more detail, particularly focusing on JavaScript's native capabilities. Wasim encourages viewers to like, subscribe, and provide feedback in the comments section, appreciating their support and promising more content in the future.
Mindmap
Keywords
💡React
💡Synthetic Events
💡Event Handling
💡Event Listeners
💡Event Target
💡Event Propagation
💡Default Behavior
💡Callback Function
💡Event Binding
💡ES6
💡Component Reusability
Highlights
Introduction to the concept of fetching events in React after a gap in video uploads.
Explanation of synthetic events in React and their role in handling user interactions.
How to bind events to elements in React, similar to traditional DOM event handling.
Demonstration of creating a reusable 'fetch event' component in ES6.
Importing and using the 'fetch event' component in the app.js file.
Three methods of fetching events on HTML elements in React.
Using the 'onClick' handler to identify which button is clicked.
Fetching the event object to understand what is happening on the event handling chain.
Utilizing 'event.target' to find out the targeted element that triggered the action.
Passing additional parameters to event handlers for more specific interactions.
The difference between creating callbacks with event handlers and the potential for confusion.
Preventing the default behavior of elements like anchor tags using 'event.preventDefault'.
Explanation of 'event.stopPropagation' to stop event bubbling and capturing.
The importance of understanding JavaScript's event handling framework for deeper knowledge.
React's synthetic events layer that ensures consistent behavior across all browsers.
Invitation for feedback and a reminder to like, subscribe, and comment on the video.
Transcripts
[Music]
hey guys welcome back to our channel
knowledge scheme and this is your friend
wasim i know it has been very long that
we i posted my last video
but there were a few things which were
going on recently and i was not able to
make more videos as well as edit them
and post them and hence
this huge gap but we are back on track
and there won't be any more delays
henceforth so
let's go ahead and start covering a new
topic in react that is
fetching
events so
in the last video we saw uh what are
synthetic events right we saw some
clicks mouse mouse on some of the other
events that usually we have with react
but today we are going to see how to
fetch those events so basically what are
these events um
if i'm clicking on a button so that
there is something which is happening
the event that is triggering so that is
an event okay so
something which is happening on the
browser okay after you click the button
how the browser knows it knows by that
event what is being clicked
so
that's there we go that this is the
event that is happening so
we are going to explore that okay how to
fetch that particular event so that we
can capture multiple things we are going
to see what are the things that we are
going to capture so basically event
handling in react is quite similar to
what event handling is happening in in
our regular
dom
right so there are multiple events event
listeners these are some huge words that
we are not going to be interested right
now okay we are going to see those in
javascript or we have already been seen
in some of the other videos in
javascript so let's see um how do we
bind these events to any of the elements
we saw
in our previous example that we binded
an event on a button we minded an event
on a div
but if i want to fetch that particular
event key just to give you an example
that i clicked on a button so on my page
there might be hundreds of buttons but
which button i click how does the
browser know which button is being
clicked or let's say that being a
programmer i want to know which button
is being clicked so how you're going to
track that so to track this you need to
pass
this this particular certain event to
your methods the method that we wrote in
a previous video if you have not seen
that video i'll just mention it
somewhere up here you can just click it
and you can just go back to our previous
video watch that and then you can come
back to this video so you have a better
understanding what we are talking about
so
let's dive into fetching these events
let's not talk anymore let's see how
exactly that is happening
so let me just click
create a folder i'm sorry i have just
lost my
laptop and hence we are going to create
some new components fresh pages
everything fresh
so
let me just add
fetch event a new component
dot js
because it is a javascript so how do we
write using es6 let's say that i write
oops
fetch event
as a function
it's a simple plain javascript es6
function and basically we are going to
export it
export default fetch event
so now this is a
reusable
function
so we can use it again we just need to
import it and use it and let me just try
to see if
if we are able to use this fetch event
ctrl s save
let's go to our app.js we used to do
like this right and go into our div
and add this
fetch
event
component you see the input is already
being placed we have seen this multiple
times we have seen how to write a
component we are continuously seeing it
again and we are going to see it in all
the future videos because that's the way
we learn by doing trying and running it
multiple times
so fetch event
this is the event okay let's go to our
browser fetch event yes we have it over
here so on this fetch event
let's try to add a button
so before we just try to
start fetching the event i'll just like
to explain you that there are three ways
you can
fetch the event
on any any kind of a button dave or any
element in html so whenever you write
some function on click on
on
double click on mouse up mouse down key
or key down there are so many events we
have but on any of these
functions that we have okay even
handlers you can say so on click is an
even handler
so whenever you click something so you
write some function to handle that event
correct
so there are three ways to do that let's
see those one by one we have seen one in
the previous video that was like
let me just quickly
add a simple button
right
on click equal to
let's say that
i just write
um click here
so it's a simple button and this is like
my
click handler
right and this click handler is nothing
but a simple again function like click
handler
this the same way we have written it up
i just write a console.log
let me just make it a bit bigger so that
you can see it more clearly i hope this
is visible now
click handler i am being clicked
okay
and
save
just go to the browser we have a click
button
i hope you can see it now
let me just go to our console
oops
let me just
increase the size of my console and
whenever i clicked
you can see sorry i double clicked it
whenever you click it will
just call it this we have seen it on in
a previous video right so this is the
first way what i did i have a on click
method right on click event okay and
what i'm doing i'm just passing a simple
function to that particular event so
whenever this button is clicked on click
this click handler function or whatever
function this is our custom name so you
can just give it a call and it will be
called
simple very easy
but now i want to see let's say that
the previous example that i was saying
let's see that let's say i have
i'll just copy paste this button a few
times
oops
so i have written this multiple times
let's say that i have button one
button two and button three
so
i have three buttons if i click here
it's calling the same thing if i'm
clicking here it's calling the same
thing if i'm clicking here it's again
calling the same thing so how does my
browser know which button is called when
correct i can add multiple events okay
we are not going to just write some do a
copy pasting for the even handlers but
that's okay
so how does my browser know or let's say
that i just want to know
which button is being called so how you
can track that to make it more easier
how is how we used to do it in
javascript was simply fetch the event
and to fetch the event you can there
there is a default parameter that is
always passed into the uh method that is
even you can just write e you can write
complete name event you can write evt
just
a sensible name so that you know what is
being called so if i just write this evt
and if you just pass it to the console i
just pass it to the console
let's see what is happening
if i click here you can see that there
is a synthetic base event and which is
the event that is an on click which is
triggered so now you are able to capture
that event yes there was something which
was happening if i just make it like
instead of on click
let's say that i do it on
double click
oops
my bad
so now the first one is simple on click
the second one is on double click the
third one is on click so let's see what
happens
if i click here
that's a synthetic based event on click
here i'll do a double click
oops
on double click so you're capturing the
events now so you know what is happening
so the browser itself knows what is
happening on the
uh
event handling chain but as a developer
you also know
which event is being triggered
if i want so let's dive a bit more if i
want to know
let me just refresh it
which button is called or you just want
to know which element
is being triggered or which is the
targeted element on which this whole
thing is happening so let's say that if
i'm clicking on button one click here
one so my targeted element is the button
first the first button that i have
written
so to know that you just have to pass
there are multiple properties
which comes with an event okay so the
simplest one is event dot target so you
can find out what was the targeted
element which was been performed the
action was performed on
so if i just write event dot target or
ev target the parameter basically that
you are passing
so that dot target
refresh
see
button click here one so this was the
element which was the targeted element
if i click on the second floor second
one because it was a double click
here
and
see you can simply find out
which targeted element you are
calling now let's jump on to the second
way of doing this
the first
way is done so the first way was i am
just writing a simple plain
straightforward function
i am passing
nothing to it
let's say that whenever i'm clicking
something okay so i'm just clicking the
button let me just change this also to
on click it's just irritating me
okay
i want to pass some data so i just want
to recognize instead of doing this event
or target and everything i just want to
pass a simple parameter to this function
okay that this is the button one this is
button two and three or something like
that so how we can do that so instead of
an event
i also want to pass a parameter with
this event
to do this you just need to make a small
change
that is
calling the function like this
this is the second way of binding an
event to this function the handler
if i just save this right now
i just need to pass an event because i
am catching the event there this is
again the same thing you just don't only
need to write e
you can just write anything over here
and the thing that i'm passing to this
function is an event so
i'm writing an event and i'm passing the
same thing if i write an e you need to
pass the e you if you're writing evt you
need to pass it you're if you're writing
knowledge king you need to pass the
knowledge gain but the first parameter
whatever you're passing
is nothing but a event you need to
recognize c there is no change if i just
do it there is nothing which is changed
both of them are
one and the same so there is a slight
problem with this the first the second
approach that you are doing
what does this do
this is this basically creates a
callback
with each whenever this hole the button
one is rendered so
this is a reusable let's let's take it
like this that this is a reusable event
okay so yeah um to make it just dive it
in a bit deeper
so what is happening over here
whenever the if i'm rendering this page
100 times it is just doing the same
thing it is reusing the same thing it is
not creating something new but whenever
i am
rendering this multiple times the same
component if i'm rendering it multiple
times a different
a different callback is created simple
but let's not dive in deep let's not get
more confused here we'll see that a bit
later in a future videos when we are
going to see it again
but
to make it more simpler we can just do
this one and the same so both are one
and the same for now i'll just copy
paste it and
click here too i want to pass another
parameter that is let's say that btn1
and the second parameter is
this is my second button
so this is my additional parameter i am
passing it i need to catch it in my
function extra parent
i just write it any name so basically
whatever you're passing you can catch it
with any name so extra parameter what i
just say i'll just write another
console.log
another parameter
comma
i'll just
print this extra parameter
refresh
whenever i'm clicking the first button
another param that is button one so you
can catch the additional parameters as
well
by using the
second type so this was the second way
by which you are calling the
method
okay
now let's jump on to the third way to do
that
but
we
this isn't just to know knowledge the
third type we usually don't do this okay
if you want to write the event handling
so if you want to write an on click and
add functions to it you just do either
way by the first way or the second way
the third way is a just to know
knowledge because that is a core
javascript way that we usually do that
is bind the event forcefully so how to
do that
so let's do this okay what i did over
here was i just added a bind so
basically i'm binding this to this event
handler but the simple problem over here
is you can find the target and
everything i am being clicked and click
handler.bind so i have binded this
okay and whatever parameter you want to
pass you can just pass it something like
this for the further use
this is the way
i'll just make it
like this
all the three things in one bow
just to for you to understand
so these are the three ways that you're
saying click here one was the first way
cliche 2 was the second way of doing
that and click here 3 was the third way
of handling these
events this was easy right react makes
it more easier and it's quite wonderful
to do this thing but
why do we do this why do we need these
events
i'll just give you another simple
example that why really we need these
events
let's take an example that instead of
buttons
as i said i can write these event
handlers on any html element
what if i want to write something like
this
a href is equal to www dot our favorite
site google.com
and let's say that click here is another
it's a simple link
if i click it it just opens the
google.com oops i did something wrong it
should be http colon double forward
slash so that it opens it wonderfully
it's just appending here
if i click it it just takes me back to
the
it just takes me to the
google site right
but
i don't want my website to be redirected
somewhere else let's say that instead of
google i have something just
something test okay
if i do this if i just click it it just
appends it to my address bar which i
really don't want i don't want it to
redirect i just want a simple
link
which should be clicked
what if you want to avoid this default
behavior of anchor that it forcefully
takes you to a different address here my
address is changing right
it is forcefully taking me to a
different address which i really don't
want so how you can avoid this okay how
you can prevent a default behavior to do
that we really need a event so what will
happen if i just say that on click
i have this
oops
click handler this is again doing the
same thing if i'm clicking here it's
just fetching me the event and the
element right now but it is not
preventing my behavior so to prevent the
behavior
as i said event has multiple properties
and methods too so there is a method
that is
evt i am using the same variable dot
default oops
prevent
default
see i'm writing it slowly so that you
understand this
this is core javascript
okay
whenever you want to prevent a default
behavior of a javascript or of a button
a link a form submission anything you
want to prevent something default which
is a default behavior of an element like
anchor stack's default behavior is to
take it to a new site form submissions
default behavior is to take to submit
the home whole form to a different thing
so if you want to avoid this default
behaviors you just need to write event
dot prevent default and voila i just do
this
even now if i click it hundred times
see
it is clicking but it is not taking me
to a new address
easy so there are multiple things so
event dot prevent default is there event
dot stop propagation is that uh is there
so that it stops the default uh bubbling
capturing of events and there are a lot
of things that you can do with events so
this is a short video i hope this was
interesting to make you understand how
you can fetch these events how you can
use this event and you can do a multiple
things with these events and this there
are wonderful things that you can do
with even handling
if you want to just learn it
deep okay if you want to dive deep into
events you have to learn the event
handlings and even listening concepts of
javascript which is really interesting
we are going to make videos on that in
our javascript sessions but not into
react because react also does the same
thing hand in hand it just adds an
overlay onto the core javascript event
handling framework so that it works
similar on all the browsers so react
adds its own layer of synthetic events
on the core javascript image that that's
the reason i said in my previous video
that we don't write on clicks like this
there is no on click small
it's written in camel casing
because react adds an additional layer
on this
i hope this was interesting i hope this
video makes sense and
we are back on track and
you all know that you have just have to
click the like and subscribe button to
keep on watching our videos and please
please please do come let me know in the
comment section what you really like and
what you you really don't like from my
videos i know you guys have been doing
this and i really appreciate it thank
you so much for giving this all this
love
see you soon
Ver Más Videos Relacionados
How Events Work in React | Lecture 134 | React.JS 🔥
Handling Events | Mastering React: An In-Depth Zero to Hero Video Series
A Complete Overview of JavaScript Events - All You Need To Know
Getting Started with Alpine.js
JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法
Getting Started | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)