1
00:00:00,490 --> 00:00:04,660
The on() method addresses a common problem
that can occur when dynamically creating

2
00:00:04,660 --> 00:00:05,960
elements.

3
00:00:05,960 --> 00:00:09,050
When the code base of a website
gets larger and more and

4
00:00:09,050 --> 00:00:13,000
more people work on it, you can't always
guarantee the order in which elements get

5
00:00:13,000 --> 00:00:16,860
added to the page and when the event
listeners are added to the page.

6
00:00:16,860 --> 00:00:19,380
Go ahead and open up the workspace
with this video now and

7
00:00:19,380 --> 00:00:20,830
I'll show you what I mean.

8
00:00:20,830 --> 00:00:22,860
I'll change this method back to click.

9
00:00:28,330 --> 00:00:32,070
And I'll move this event listener code
above where we append the button to

10
00:00:32,070 --> 00:00:32,620
the page.

11
00:00:34,590 --> 00:00:41,190
Save and preview, click on the button,
and it doesn't work, nothing happens.

12
00:00:41,190 --> 00:00:42,650
Why isn't the button being hidden?

13
00:00:44,544 --> 00:00:46,604
Looking at this first line of code,

14
00:00:46,604 --> 00:00:50,932
we're selecting all the spoiler buttons
on the page and applying the event

15
00:00:50,932 --> 00:00:55,343
handler to show the span containing
the spoiler text and hiding the button.

16
00:00:55,343 --> 00:00:58,572
But at this point in the script,
we haven't created the button and

17
00:00:58,572 --> 00:01:01,100
appended the button to the page yet.

18
00:01:01,100 --> 00:01:01,940
We do that here.

19
00:01:03,560 --> 00:01:08,740
So up here, we're saying add this
event listener to this button element.

20
00:01:08,740 --> 00:01:11,170
But the button doesn't yet exist.

21
00:01:11,170 --> 00:01:13,960
This is a problem you may find
yourself running into a lot

22
00:01:13,960 --> 00:01:16,520
when dynamically adding
elements to a page.

23
00:01:16,520 --> 00:01:20,840
Say we wanted to add a feature to our
spoiler revealer that allows the user to

24
00:01:20,840 --> 00:01:25,050
add new spoilers,
that's where you'd run into a problem.

25
00:01:25,050 --> 00:01:28,960
Any buttons you add to the page after
it's already loaded won't automatically

26
00:01:28,960 --> 00:01:32,180
have a click event attached,
so they won't work.

27
00:01:32,180 --> 00:01:36,000
That's where event delegation and
the on() method come in.

28
00:01:36,000 --> 00:01:38,020
Event delegation means
you're listening for

29
00:01:38,020 --> 00:01:42,640
an event on the parent element
instead of on the child element.

30
00:01:42,640 --> 00:01:48,190
So in our project, instead of listening
for a click event, on the button itself

31
00:01:48,190 --> 00:01:52,930
which we're dynamically adding here, we'll
listen for a click event on the button's

32
00:01:52,930 --> 00:01:57,462
parent element which is the paragraph
tag with the class of spoiler.

33
00:01:57,462 --> 00:01:58,520
Because we're listening for

34
00:01:58,520 --> 00:02:02,220
an event on the parent element,
it doesn't matter whether the descendants

35
00:02:02,220 --> 00:02:07,440
exist in the DOM at the time of the page
load, or are dynamically added later.

36
00:02:07,440 --> 00:02:09,990
This is called event propagation.

37
00:02:09,990 --> 00:02:14,060
When an event moves through the DOM from
a child to a parent element, that's called

38
00:02:14,060 --> 00:02:18,610
event propagation because the event
propagates, or moves through the DOM.

39
00:02:18,610 --> 00:02:23,310
In this example, an event from a button
gets passed to the parent paragraph.

40
00:02:24,760 --> 00:02:26,210
Here's what that looks like in code.

41
00:02:28,545 --> 00:02:31,280
I'll comment out this code for now.

42
00:02:31,280 --> 00:02:33,844
And first, we select the parent
element which is spoiler.

43
00:02:37,766 --> 00:02:39,995
Then we use the on() method.

44
00:02:39,995 --> 00:02:43,667
Remember, the first argument of
the on() method is the event or

45
00:02:43,667 --> 00:02:45,417
events we're listening for.

46
00:02:45,417 --> 00:02:49,800
So click, mouse over,
blur, mouse out, etc.

47
00:02:49,800 --> 00:02:51,670
In this case, we're listening for a click.

48
00:02:53,040 --> 00:02:56,650
Then we give it,
as a second argument, a selector for

49
00:02:56,650 --> 00:03:00,410
the actual element we want to listen for
the click on.

50
00:03:00,410 --> 00:03:04,530
For our selector,
we can just use the element name, button.

51
00:03:04,530 --> 00:03:05,940
Then we can add our click handler.

52
00:03:09,327 --> 00:03:12,660
Let me make sure you understand
what this is saying.

53
00:03:12,660 --> 00:03:17,640
Basically, we're saying here,
if the user clicks the spoiler element,

54
00:03:17,640 --> 00:03:20,740
or any of the elements nested
within the spoiler element,

55
00:03:20,740 --> 00:03:24,640
start paying attention because
we may want you to do something.

56
00:03:24,640 --> 00:03:29,380
Secondly, we're saying, if the user
clicks anywhere inside the spoiler,

57
00:03:29,380 --> 00:03:33,890
in that particular thing, it was clicked
on was an element called button.

58
00:03:33,890 --> 00:03:36,310
Then fire this function, run this code.

59
00:03:37,670 --> 00:03:41,980
Let's copy and paste our code into this
new listener and delete the old one.

60
00:03:57,690 --> 00:04:03,780
So let's save and preview,
and the button works again.

61
00:04:03,780 --> 00:04:06,970
Now, it doesn't matter when the button
is created because we're listening for

62
00:04:06,970 --> 00:04:10,610
this event on the button's parent
element which is already on the page.

63
00:04:11,950 --> 00:04:16,960
Event delegation comes in very handy when
adding interactivity to dynamically added

64
00:04:16,960 --> 00:04:18,030
elements.

65
00:04:18,030 --> 00:04:20,770
Or when you're not in full control
of when elements are added.

66
00:04:21,820 --> 00:04:26,370
If you're finding event delegation a bit
difficult to understand, that's okay.

67
00:04:26,370 --> 00:04:30,730
It can be a little hard to grasp until you
run into the problem in your own code.

68
00:04:30,730 --> 00:04:34,000
So just remember, if you're ever
using JavaScript to create and

69
00:04:34,000 --> 00:04:38,700
add new elements to a page and find
that your event listeners aren't firing,

70
00:04:38,700 --> 00:04:41,320
look up event delegation and
the on() method.