- Adding jQuery to a Project 2:43
- Spoiler Revealer: Breaking it Down 6:28
- Understanding Unobtrusive JavaScript 4:38
- Adding New Elements to the DOM 5:06
- Progressive Enhancement and Unobtrusive JavaScript 5 questions
- Adding New Elements to the DOM 2 objectives
- Using on() for Event Handling 2:26
- Using Events with Dynamically Added Elements 4:41
- The Event Object 4:44
- Events with jQuery 2 objectives
- What is Traversal? 8:42
- DOM Traversal with jQuery 2 objectives
- jQuery Events and DOM Traversal Review 5 questions
Preview
Video Player
00:00
00:00
Using Events with Dynamically Added Elements
4:41Learn about event delegation and how it can be used to add event listeners to dynamically added DOM elements.
The on() method addresses a common problem
that can occur when dynamically creating
0:00
elements.
0:04
When the code base of a website
gets larger and more and
0:05
more people work on it, you can't always
guarantee the order in which elements get
0:09
added to the page and when the event
listeners are added to the page.
0:13
Go ahead and open up the workspace
with this video now and
0:16
I'll show you what I mean.
0:19
I'll change this method back to click.
0:20
And I'll move this event listener code
above where we append the button to
0:28
the page.
0:32
Save and preview, click on the button,
and it doesn't work, nothing happens.
0:34
Why isn't the button being hidden?
0:41
Looking at this first line of code,
0:44
we're selecting all the spoiler buttons
on the page and applying the event
0:46
handler to show the span containing
the spoiler text and hiding the button.
0:50
But at this point in the script,
we haven't created the button and
0:55
appended the button to the page yet.
0:58
We do that here.
1:01
So up here, we're saying add this
event listener to this button element.
1:03
But the button doesn't yet exist.
1:08
This is a problem you may find
yourself running into a lot
1:11
when dynamically adding
elements to a page.
1:13
Say we wanted to add a feature to our
spoiler revealer that allows the user to
1:16
add new spoilers,
that's where you'd run into a problem.
1:20
Any buttons you add to the page after
it's already loaded won't automatically
1:25
have a click event attached,
so they won't work.
1:28
That's where event delegation and
the on() method come in.
1:32
Event delegation means
you're listening for
1:36
an event on the parent element
instead of on the child element.
1:38
So in our project, instead of listening
for a click event, on the button itself
1:42
which we're dynamically adding here, we'll
listen for a click event on the button's
1:48
parent element which is the paragraph
tag with the class of spoiler.
1:52
Because we're listening for
1:57
an event on the parent element,
it doesn't matter whether the descendants
1:58
exist in the DOM at the time of the page
load, or are dynamically added later.
2:02
This is called event propagation.
2:07
When an event moves through the DOM from
a child to a parent element, that's called
2:09
event propagation because the event
propagates, or moves through the DOM.
2:14
In this example, an event from a button
gets passed to the parent paragraph.
2:18
Here's what that looks like in code.
2:24
I'll comment out this code for now.
2:28
And first, we select the parent
element which is spoiler.
2:31
Then we use the on() method.
2:37
Remember, the first argument of
the on() method is the event or
2:39
events we're listening for.
2:43
So click, mouse over,
blur, mouse out, etc.
2:45
In this case, we're listening for a click.
2:49
Then we give it,
as a second argument, a selector for
2:53
the actual element we want to listen for
the click on.
2:56
For our selector,
we can just use the element name, button.
3:00
Then we can add our click handler.
3:04
Let me make sure you understand
what this is saying.
3:09
Basically, we're saying here,
if the user clicks the spoiler element,
3:12
or any of the elements nested
within the spoiler element,
3:17
start paying attention because
we may want you to do something.
3:20
Secondly, we're saying, if the user
clicks anywhere inside the spoiler,
3:24
in that particular thing, it was clicked
on was an element called button.
3:29
Then fire this function, run this code.
3:33
Let's copy and paste our code into this
new listener and delete the old one.
3:37
So let's save and preview,
and the button works again.
3:57
Now, it doesn't matter when the button
is created because we're listening for
4:03
this event on the button's parent
element which is already on the page.
4:06
Event delegation comes in very handy when
adding interactivity to dynamically added
4:11
elements.
4:16
Or when you're not in full control
of when elements are added.
4:18
If you're finding event delegation a bit
difficult to understand, that's okay.
4:21
It can be a little hard to grasp until you
run into the problem in your own code.
4:26
So just remember, if you're ever
using JavaScript to create and
4:30
add new elements to a page and find
that your event listeners aren't firing,
4:34
look up event delegation and
the on() method.
4:38