Learn JavaScript Event Listeners In 18 Minutes

Summary

This video from Web Dev Simplified with Kyle offers an in-depth exploration of JavaScript event listeners, suitable for both beginners and experienced developers. It begins with the fundamentals of creating event listeners, explaining how they work, and progresses to more advanced topics like event capturing and bubbling. The tutorial also covers delegation, stopping event propagation, and techniques for running events a specific number of times. Kyle simplifies complex concepts and provides practical examples, ensuring viewers gain a comprehensive understanding of event listeners to enhance their web development skills.

Takeaways

• 😀 Event listeners are essential for interactive web development, suitable for beginners and experienced developers alike.
• 📚 The video covers the basics of creating event listeners, explaining how they work and their importance in web development.
• 🔍 Capturing, bubbling, and delegation are key concepts in understanding how events propagate through the DOM.
• 👆 The 'target' property within the event object is crucial as it identifies the element that triggered the event.
• 🔄 Multiple event listeners can be added to the same element, and they execute in the order they were defined.
• 💡 Event bubbling is the process where an event works its way from the deepest nested element to the outermost element.
• 🔍 Event capturing is the opposite of bubbling, where the event starts at the outermost element and moves towards the target element.
• 🛑 The 'stopPropagation' method can be used to halt the event from continuing through the capture or bubble phase.
• 🔄 The 'once' option in event listeners allows an event to trigger just once before automatically removing itself.
• ♻️ The 'removeEventListener' method provides the functionality to manually remove an event listener when needed.
• 🎯 Event delegation is a powerful technique for handling events on dynamically added elements without the need to attach individual listeners to each one.

Q & A

What is the main topic of the video?

The main topic of the video is event listeners in JavaScript, covering their basics, how they work, capturing and bubbling, delegation, and additional tips.

What are the two parameters required to create an event listener according to the video?

The two parameters required to create an event listener are the type of event to listen for and a callback function that runs every time the event occurs.

What is the purpose of the 'target' property in an event object?

The 'target' property in an event object refers to the element that was clicked on or the element on which the event occurred. It is important for identifying the specific element that triggered the event.

How can multiple event listeners be added for the same element?

Multiple event listeners can be added by calling the 'addEventListener' method multiple times with different callback functions for the same event type on the same element.

What is event bubbling?

Event bubbling is the process where an event works its way from the closest element to the furthest away element in the DOM tree, triggering event listeners for all elements along the path from the target to the document.

What is event capturing?

Event capturing is the opposite of bubbling. It starts at the outermost element (document) and moves towards the target element, triggering event listeners in a top-down approach.

How can you stop the propagation of an event?

You can stop the propagation of an event by calling the 'stopPropagation' method on the event object (e) within an event listener.

What is the purpose of the 'once' option in the 'addEventListener' method?

The 'once' option, when set to true, ensures that the event listener will run only one time and then remove itself, preventing it from triggering again on subsequent events.

Why is it necessary to use a separate function for 'addEventListener' and 'removeEventListener'?

Using a separate function ensures that the same function reference is used for both adding and removing the event listener. Anonymous functions created inline may not be the same, preventing 'removeEventListener' from correctly removing the listener.

What is event delegation and how does it solve the problem of dynamically added elements not having event listeners?

Event delegation is the technique of adding an event listener to a parent element that will handle events triggered by its children, even those added dynamically after the listener was set. It leverages the bubbling phase of event propagation to manage events for all matching child elements.

Can you provide an example of how to implement event delegation?

To implement event delegation, you can add an event listener to a common parent element (like 'document') and check if the 'target' of the event matches a specific selector (e.g., 'div'). If it matches, the callback function is executed, thus handling the event for all elements that match the selector, including those added later.

Outlines

00:00

📚 Introduction to Event Listeners

This paragraph introduces the topic of event listeners in JavaScript, suitable for both beginners and experienced developers. Kyle from Web Dev Simplified promises to cover the basics of creating event listeners, their functionality, capturing and bubbling, and delegation. The video aims to provide a comprehensive understanding of these concepts, which are crucial for web development. Kyle also mentions additional tips and tricks associated with event listeners, ensuring the audience stays engaged until the end of the video.

05:02

🔗 Understanding Event Bubbling and Capturing

This section delves into the mechanics of event propagation, explaining the concepts of bubbling and capturing. Kyle demonstrates how events travel through the DOM from the target element to the document, and vice versa, during the capturing phase. He illustrates the process with a practical example involving a 'grandparent', 'parent', and 'child' HTML structure, showing how event listeners are triggered in sequence during these phases. The explanation includes the use of the 'stop propagation' method to halt event propagation, which is essential for controlling event flow in complex applications.

10:02

♻️ Event Listener Management Techniques

In this paragraph, Kyle discusses various techniques for managing event listeners effectively. He introduces the 'once' option to run an event listener a single time before removing it and demonstrates how to use the 'removeEventListener' method to manually remove event listeners. The importance of defining separate functions for 'addEventListener' and 'removeEventListener' is highlighted to ensure they reference the same function, allowing for successful removal. This section provides valuable insights for developers who need precise control over event handling in their applications.

15:03

🎯 Implementing Event Delegation

The final paragraph focuses on event delegation, a powerful technique for handling events on dynamically added elements. Kyle explains the common issue of new elements not having pre-existing event listeners and introduces event delegation as a solution. By attaching a single event listener to a parent element and using the 'event.target' property, developers can manage events for all child elements, including those added later. He provides a step-by-step guide on implementing event delegation and even creates a reusable function called 'addGlobalEventListener' to streamline the process. This approach is particularly useful for large-scale applications with dynamic content.

Keywords

💡Event Listeners

Event listeners are functions that wait for a specific event to occur, such as a click or mouseover, and then execute code in response. In the video, event listeners are the core concept, with the script explaining how to create and utilize them in web development. The script demonstrates setting up event listeners for click events on various HTML elements, such as a 'grandparent', 'parent', and 'child'.

💡Callback Function

A callback function is a piece of code that is to be executed after another function has finished its task. In the context of the video, the callback function is the code that runs every time an event occurs, such as a click. The script mentions that this function typically takes an 'event object' as a parameter, which contains information about the event.

💡Event Object

The event object is a data structure that contains information about an event that has occurred, such as the target element that triggered the event. In the script, the event object is denoted by 'e' and is used to access details about the click event, including the target of the click.

💡Event Propagation

Event propagation refers to the process by which an event travels through the DOM. The video discusses two phases of event propagation: capturing and bubbling. The script explains how events naturally bubble up from the target element to the DOM root, and how this can be controlled using event listeners.

💡Bubbling

Bubbling is a phase of event propagation where an event works its way from the most deeply nested element to the outer elements, or from the target to the document. The script uses the analogy of 'bubbling up the tree' to describe this process, illustrating it with the example of clicking on a 'child' element and the event listeners on 'parent' and 'grandparent' also firing.

💡Capturing

Capturing is the opposite of bubbling and refers to the initial phase of event propagation where the event works its way down from the outer elements to the target element. The video script explains how to set up capturing event listeners and demonstrates the order in which events are handled during the capturing phase.

💡Stop Propagation

Stop propagation is a method used to halt the further propagation of an event in the DOM. The script describes how to use the 'stopPropagation' method on the event object to prevent an event from reaching other elements in the DOM, which is useful for controlling the flow of event handling.

💡Event Delegation

Event delegation is a technique where an event listener is attached to a parent element instead of individual child elements, allowing for handling events on dynamically added elements. The video script explains how event delegation works by setting up a single event listener on the 'document' and using the event's target to determine if the event occurred on a 'div'.

💡Add Event Listener

The 'add event listener' method is used to attach an event listener to an element. The script demonstrates how to use this method by specifying the event type (e.g., 'click') and the callback function that should be executed when the event occurs.

💡Remove Event Listener

The 'remove event listener' method is the counterpart to 'add event listener' and is used to detach an event listener from an element. The script shows how to use this method to stop an event listener from executing after it has run a certain number of times or under specific conditions.

💡Once Option

The 'once' option is a property that can be passed to the 'add event listener' method to specify that the event listener should only run once and then be removed. The script mentions this option as a way to ensure an event listener is executed only a single time, which is useful for one-off actions.

Highlights

Introduction to the video on event listeners, aimed at both beginners and experienced developers.

Explanation of creating an event listener and its basic function.

Discussion on event capturing, bubbling, and delegation, which are crucial for understanding how event listeners work.

Demonstration of setting up a click event listener on a 'grandparent' element in an HTML file.

Explanation of the 'event' object and its properties, particularly the 'target' property.

Illustration of adding multiple event listeners and their execution order.

Clarification on why clicking a 'child' element triggers event listeners on 'parent' and 'grandparent' elements.

Introduction to the concept of event bubbling and how it traverses from the target element to the document.

Explanation of the capturing phase of event propagation and how it differs from bubbling.

How to use the third parameter in 'addEventListener' to initiate the capture phase.

Demonstration of the sequence of event capturing and bubbling with multiple elements.

Introduction to the 'stopPropagation' method to halt event propagation during capturing or bubbling phases.

Use of the 'once' property in the options parameter to run an event listener only once.

Explanation of how to remove an event listener using the 'removeEventListener' function.

The importance of using named functions for 'addEventListener' and 'removeEventListener' to ensure correct removal.

Introduction to event delegation as a solution for handling events on dynamically added elements.

Demonstration of how event delegation works by adding an event listener to the 'document' and using the 'target' property to filter events.

Creation of a utility function 'addGlobalEventListener' for simplified event delegation.

Conclusion summarizing the comprehensive coverage of event listeners in JavaScript.

Transcripts

whether you're a complete beginner just

learning how to use event listeners

or if you've built multiple projects on

your own using event listeners all the

time

i can guarantee you there's something in

this video you don't already know

[Music]

welcome back to web dev simplified my

name is kyle and my job is to simplify

the web for you

so you can start building your dream

project sooner so if that sounds

interesting

make sure you subscribe to the channel

for more videos just like this

now like i mentioned in the intro we're

going to be covering a ton of

information related to event listeners

we're going to start at the very basics

of how you create an event listener and

how they actually work

then we're going to talk about capturing

bubbling and delegation

and how all of that works because it's

incredibly important to understand

and most people really don't understand

it well enough and then finally we're

going to talk about a few minor tidbits

here and there

of bonuses that come with event

listeners so this video is going to be

jam packed full of information so make

sure you stick around till the end to

get all the information you need

now to get started i have a really

simple index.html file

where we have a grandparent inside that

we have a parent and inside that we have

a child

you can see on this right hand side we

have this red grandparent blue

parent and then green child and what

we're going to do is set up event

listeners for when we click

on these elements so the very first

thing i want to do is set up a click

event listener on the grandparent

in order to do that all we need to do is

take the grandparent element

so just type in grandparent and we put a

period and as you can see the very first

thing on this list is called add event

listener so just type in add

event listener and this is going to take

two to three parameters for now we're

just going to start with the two

parameter version because that's the

most common

the first parameter you put in here is

going to be the type of event that you

want to listen for

in our case we're listening for a click

event there are

tons and tons of events you can listen

for and if you want to know what they're

called just google

you know mouse down event or mouse over

event and it'll give you the exact name

that you're looking for if you don't

already know it

the next thing we need to pass here is a

callback and this callback is just a

function that runs

every single time that we do whatever

the event is in our case click

and this takes a single parameter which

is the event object

generally you'll see this called e we're

just going to use an arrow function for

our use case

if you don't already know arrow

functions make sure to check out my

video linked in the cards and

description

it covers arrow functions in depth so

now let's just come in here and do a

console log of

e to see exactly what this e is so now

if we just come over here

click on the grandparent you're going to

notice we get this massive event down

here with tons of information inside of

it

a lot of this information deals with

where your mouse is on the screen

it deals with where you're holding down

like the control key for example there's

a bunch of information inside of here

but probably the most important

information that you're going to care

about is this thing called target right

here

target is essentially the thing that you

clicked on in our case the grandparent

so that is the target and target is just

an element so it has all the normal

element related information

inside of it but generally when you're

dealing with click event listeners or

any event listener target is usually the

most

important thing that you want to mess

with inside of the event listener

because it is the thing

that the event happened on so in our

case that would be this grandparent

so if we just console.log e dot target

and i click on this again you're gonna

see it prints out that grandparent

element

now one thing that's also interesting

about event listeners is we'll just

change this to print out

grandparent one what we can do is add

multiple event listeners so if i just

copy this

asa down here and put grandparent two

inside of it and i click save

when we click on this you're going to

notice it's going to run both of the

event listeners in the order that we

defined them so grandparent one goes

first because that's the first one we

define

and then grandparent two comes second

because that's the second one that we

define

as the default behavior of event

listeners and this right here is what

most people understand when it comes to

event listeners they know how to put the

type in

they know how to create a callback

function and they know that they run in

the order that you define them

that's about where most people's

knowledge stops so in the rest of this

video we're gonna go beyond

just this basic information and talk

about everything else that there is to

know about event listeners

like for example you'll notice when i

click on this child it still prints out

the grandparent information

why exactly is that well to figure out

let's first set up event listeners for

our parent and our child

so let's just come in here we're going

to copy this grandparent one

paste it down and in here we're just

going to say

oops parent and this will just say

parent and then we're going to do the

exact same thing

for child so here we'll say child

and child so now if we click grandparent

it'll print grandparent

when we click on the parent you're going

to notice it prints out parent one

and then grandparent one and now when we

click the child it's going to print

child one

parent one and then grandparent one so

if you're paying attention essentially

what's happening

is that it's we're clicking on this

element but behind this green child

is also our blue parent and behind our

blue parent is our red

you know grandparent here and even

further behind that is our actual

document itself

which we could set up an event listener

for for example document

dot add event listener click and we're

just going to come in here

and we're going to console.log

document1 so now if we click the

document it prints out document we click

here it prints out child

parent grandparent and then document and

that's because it's working its way from

the closest element in our case this

child

all the way to the furthest away element

which is our document

and it's running click event listeners

for all of them because we technically

clicked on all of them since the child

is inside the parent

and the parent is inside of the

grandparent and the grandparent is

inside of the whole document itself

this process of going from the closest

element to the furthest away element

is something called bubbling you also

might hear it called event bubbling

and this is one half of how events work

inside of javascript

the other half of how they work is

called capturing

so if i just go to this elements tab

here i'm going to expand this up so we

can really see what we're working with

get it as large as i can and open up the

grandparent parent and the child

so you're going to see at our very first

when we click on our page

we click inside the child right so our

click is going to start at the child

here it's going to go down to the parent

go down to the grandparent and then all

the way down to the document as its

final step it's kind of working out of

its hierarchy

because we clicked on all of them well

that is like i said the bubbling phase

there's a second phase called the

capturing phase and this actually

happens first

the way the capture works is it works

for the thing furthest away and moves up

so it'll start with the document then

the grandparent then the parent then the

child

then we swap over to the bubble phase

where we go from child

to parent to grandparent back to

document the way to remember this that i

like to think about it

is when you bubble generally bubbles

move upward because they're light

so you bubble up the tree so you start

down here at the lowest

most minute element and you bubble

upwards out of the tree that's how i

like to remember capturing versus

bubbling

like i said capture starts on the

outside moves in and then bubbling

happens second

and goes from the inside out but right

now all of our events are bubble events

because as you notice we print child

then parent then grandparent

and document in that order because

they're all bubbling so how exactly

do we do a capture that is where this

third parameter

to the add event listener comes into

play we can pass in here an option

these options is just an object where we

pass in different parameters to it so we

could

pass capture and set it to true by

default this is set to false

but if we set it to true we're saying we

want this event to be a capture event

so now if i save this and i click on the

child you're going to notice something

interesting it prints grandparent one

then child one then parent one then

document one and that's because our

grandparent is in the capture phase

so if we just go to our html here real

quick what's happening is we start with

the capture which means we start at our

document

then we move to our grandparent which we

set up a capture event on so it prints

out here

then we do the capture for our parent

there is no capture event so we skip it

do the capture for our child again there

is no capture for our child so we skip

it

and then we do the bubble so we bubble

our child where it prints out child one

do the bubble for our parent where it

prints out parent one bubble for our

grandparent

and since we swapped this to a capture

event there is no bubble phase so it

skips it

and then we do the bubble for our

document which finally finishes this all

off

so this is how the capturing and

bubbling system works and to really see

in depth how it works

what i want to do is just copy all of

these events so we can have grand

apparent

capture and then we're going to have

grandparent

bubble which is just the default so i'm

going to remove that

and i'm just going to copy this down a

couple times so we have

all of them so we got the parent this is

going to be

parent capture parent here

parent bubble then we're going to have

our child

and our child capture

then we're going to do the bubble for

our child right here so

child bubble and then we can even finish

this off by doing the document as well

so we got document

bubble and we each copy this

you can get the document capture as our

final one

the document here document capture

so now if i click on this child it's

going to go document capture grandparent

capture parent capture child capture

and then it goes back down the tree with

the bubbling so child bubble parent

bubble grandparent bubble document

bubble

starts on the outside captures inward

then goes from the inside and bubbles

outward

that's how these events work now this is

all great that we have the capture and

bubble phase

but sometimes there are things that are

going to happen that prevent the event

from going through the entire capture

and bubble phases

and this is what happens when you stop

the propagation of an event

so let's say that when we get to the

parent capture

we want to stop all propagation we want

to say you know what

once the parent gets the event we want

to stop and have nothing else get it

so if we find our parent capture here we

can take our event object which we

called e

and call the stop propagation method on

it

now when we click on the child you're

going to notice it goes document capture

grandparent capture and parent capture

and then none of the other capture

phases or bubble phases occur

because what we did here is we stopped

the propagation of our event which means

it just immediately stops it doesn't do

any more capturing or

any more bubbling which is why we only

get these three being printed out

if we move this now instead into let's

say our child bubble

we just paste it in here you're going to

notice it goes through the whole capture

phase

for all of our elements and then as soon

as the child bubble happens it stops

propagation and none of the other

bubbling for the parent

grandparent or document occur so we can

use e dot stop propagation

to stop our event from propagating

upwards or downwards through the capture

or bubble phase

now i just want to clean this up a

little bit we're going to get rid of our

document events and we're going to get

rid of all these capture events as well

so we're just left with

our original three events that we set up

here so we have grandparent

parent and child and when we click if we

get rid of this stop propagation

you can see we get child bubble parent

bubble and grandparent bubble now

another thing i want to talk about is a

really common thing that you need to do

with events and that's when you want to

run an event once

and never run it again you can use this

third options parameter here inside of

your ad event listener and you can pass

it a property of once

set that to true and this event will run

one time and then remove itself

immediately

so if we click you can see we got child

parent grandparent click again

we just get child and grandparent

because parent was set up to run

only one time which is really useful if

you need an event just to happen one

time

and we can click as many times as we

want the parent is never going to show

up here

what happens if you maybe want an event

to run three times or four times or five

times or you want to

stop it on your own and not just after

one event well what you can do instead

is use the dot remove event listener

function this works just like the add

event listener you pass it the type and

function

and will remove that function from your

event listener

so if we just come down here and create

a function called print

i and we just say console.log

i make it capitalize there we go and

when we do the parent here

what we want to do instead is print

i then we can remove that event listener

at a later point

so let's just say set timeout

and this is just going to run some code

after let's say

two seconds so 2000 milliseconds we're

going to do

dot remove event listener on the click

event

and we want to remove that print high

function

so now if i run this and i click you can

see it prints out high for our parent

but if we wait you know two seconds and

then click again you can see it has

removed that event listener for us

by using the parent.remove event

listener and the reason i created a

function separately for this

is that if we wrote this code inline

like this console.log

i and we just copy this over

to here remove this function down here

you'll notice this doesn't actually work

we can click a bunch of times it prints

out high

and now if we wait two seconds it's been

about two seconds we click again

it's still printing out high as you can

see here and the reason for that

is that this function and this function

over here while they look

identical are actually two different

functions because you created two

anonymous functions

so they aren't the same which means

remove event listener can't remove it

because this event is technically a new

event and it's different from the

original event we added it to

that's why if you want to use remove

event listener you need to create a

variable or function or something

that is the same for both of the add and

remove event listener

now the very last thing that i want to

talk about is going to be how you

delegate

events because this is really important

when it comes to dynamically adding

elements to your page

let's just get rid of all that we're

just going to select all of the divs on

our page so document.queryselector

all or our divs and each one of these

elements is a div so it's just going to

select all of our elements

and then we just want to loop through

our divs so we'll say for each div

all we want to do is add an event

listener

oops not console log div dot add event

listener

on click and we just want to print out

for example

console.log i there we go

now when we click on a div it's going to

print out height if we click on one of

the middle divs it's going to print high

for each one of them

that works just fine but now let's say

that we want to create a new div so

we're going to say new

div is equal to document.createelement

of div and then we're just going to

append that to the end of our body so

body

dot append new div let's make sure we

just give this div some styles so we can

see it

so new div dot style dot

width equals 200 pixels

new div dot style dot height equals 200

pixels and we'll just say

new div dot background i'm sorry dot

style

dot background

color we're just going to set this to

purple

so now you can see we have this new div

over here and we click these divs they

all print out high just like we expect

when i click this div it doesn't print

high the reason for that

is that up here i selected all of the

divs on my page i added event listeners

to them

and then after i did that i added a new

div

and then i you know put it on the page

but this one wasn't selected up here

because the selector was ran

before i created this new div this is a

problem a lot of people that are new to

javascript and event listeners run into

is they think that the new div will have

the event listener but it actually

doesn't because it was added after the

event listeners were added

we could come in here and say new div

dot

add event listener per click

and you know we could come in and make

sure that we console log high inside of

here

and now it'll work because we added the

event listener after the fact

this is kind of clunky and it's really a

pain to do this

so instead what i like to do is event

delegation

since you know that our events go

through the bubble and capture phase

we know that all of our events

eventually end up on the document

we could say document.addeventlistener

for click

and inside of here we can just

console.log hi

now what this is going to do is just log

high every time we click on our page

whether we click on one of our divs or

if we click on our body or anywhere else

so clearly it's not quite what we want

because it works everywhere and we only

want it to work when we click on a div

so what we can do is take that event

property called e

we can get the target from it we can

call a function called matches

this just takes a css selector and if

the

target matches it it returns true so we

could pass div as our selector here and

then if

this is true that means we've clicked on

a div so let's log out hi

and now when i click instead of a div

you can see we get our high being logged

out

but when i click over outside of a div

you notice no high is being printed

but our new div will print out hi just

like we wanted to

so this is perfect and does exactly what

we want i use this kind of code

all the time which is why generally i

like to turn this into a function

i like to just call it add global event

listener

which takes in a type a selector and

then a callback

and inside of here i just like to add my

event listener

whoops add the event listener or the

type i like to

then have my callback here and inside of

this

what i do is i just say if

e.target.matches

oops matches selector

then i call the callback with the event

this right here

does the exact same thing as what we

have up here so i could just say add

global event listener for click

and i want it to match a div

then i can just get rid of all this code

and now if i run this

we get the exact same thing when we

click a div it prints out hi and

anywhere else it doesn't

and essentially all that i did is i just

wrapped that code inside of a nice handy

function which i can call anywhere which

takes a selector

i'm sorry a type a selector and then a

callback for whenever we click on

something that matches this selector

super handy function i like to include

it everywhere and that's all there is to

event listeners in javascript

if you enjoyed this video make sure to

check out my complete javascript

simplified course linked down below

it covers literally everything you need

to know about javascript

and with that said thank you very much

for watching and have a good day