Multiple ways of Fetching Events in React #knowledgekeen

Summary

In 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

00:00

🎥 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.

05:00

🔍 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.

10:01

📌 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.

15:02

🛑 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.

20:03

🌐 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.

Keywords

💡React

React is a popular JavaScript library used for building user interfaces, particularly single-page applications. It is the main theme of the video script, as the tutorial discusses handling events within React components. For instance, the script mentions 'fetching events' in React, indicating the process of capturing user interactions with the UI.

💡Synthetic Events

Synthetic Events are React's wrapper around the browser's native events. They provide a consistent interface for different browsers and improve performance by allowing React to optimize event handling. The script refers to synthetic events when explaining how React handles user interactions like clicks.

💡Event Handling

Event handling is a fundamental concept in JavaScript and React, where developers define functions to execute in response to user actions or browser events. The video script delves into various methods of event handling in React, such as using inline functions or passing event objects to handlers.

💡Event Listeners

Event listeners are functions that run when a specific event occurs. The script briefly touches on the concept, emphasizing that while they are important, the focus is on how React handles events, which is often more straightforward than traditional DOM event listeners.

💡Event Target

The event target refers to the specific element that triggered an event. In the script, the concept is illustrated by explaining how to determine which button was clicked by using 'event.target' to capture the element that initiated the event.

💡Event Propagation

Event propagation is the process by which an event travels through the DOM. The script mentions 'event.stopPropagation', which is a method used to stop an event from bubbling up through the DOM tree, preventing parent elements from receiving the event.

💡Default Behavior

Default behavior in web development refers to the standard action an element takes when an event occurs. The video script provides an example of preventing the default behavior of an anchor tag, which is to navigate to a new URL, by using 'event.preventDefault()'.

💡Callback Function

A callback function is a function passed into another function as an argument to be executed later. The script discusses the use of callback functions in event handling, such as creating a new function each time a button is rendered, which can be problematic in certain scenarios.

💡Event Binding

Event binding is the process of attaching an event listener to a specific event on a DOM element. The script explains different methods of event binding in React, including inline event handlers and using the '.bind()' method to attach event handlers.

💡ES6

ES6, or ECMAScript 2015, is a version of the JavaScript language that introduced many new features, including modules, classes, and arrow functions. The script mentions using ES6 syntax when defining a function component in React, showcasing modern JavaScript practices.

💡Component Reusability

Component reusability is a key feature of React, allowing developers to create modular components that can be used in different parts of an application. The script demonstrates creating a reusable 'fetchEvent' component, emphasizing the benefits of DRY (Don't Repeat Yourself) coding practices.

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