1
00:00:00,610 --> 00:00:04,395
So far we've done basic event
handling with the click method.

2
00:00:04,395 --> 00:00:06,610
jQuery also has many other methods for

3
00:00:06,610 --> 00:00:11,770
other event types such as mouseover,
or when a mouse moves over an element.

4
00:00:11,770 --> 00:00:15,820
Keypress for when a user presses
a key in an input element, and

5
00:00:15,820 --> 00:00:19,570
the focus event,
when an input field captures focus, or

6
00:00:19,570 --> 00:00:23,060
in other words when the cursor
appears in an input field.

7
00:00:23,060 --> 00:00:27,530
These methods are fine for simple
applications, but they have their limits.

8
00:00:27,530 --> 00:00:28,540
For example,

9
00:00:28,540 --> 00:00:32,900
what if I wanted to add more than one
event listener to this button element?

10
00:00:32,900 --> 00:00:37,000
What if I wanted to reveal the spoiler
not only if they click the button but

11
00:00:37,000 --> 00:00:39,990
if they press Enter or something else?

12
00:00:39,990 --> 00:00:42,330
I could add another event listener, but

13
00:00:42,330 --> 00:00:46,320
then I'd be repeating the same
code inside each one.

14
00:00:46,320 --> 00:00:51,080
Takeaway provides a flexible method
to solve this problem, the on method.

15
00:00:51,080 --> 00:00:53,260
The on method looks like this.

16
00:00:53,260 --> 00:00:59,110
You first pass in the name of the event,
click for example, and then the handler.

17
00:00:59,110 --> 00:01:04,070
You can use on to assign one event handler
to multiple events, this way the same

18
00:01:04,070 --> 00:01:09,290
code will fire when either event occurs,
saving you from having to repeat code.

19
00:01:09,290 --> 00:01:11,960
There are other benefits
that we'll look at later.

20
00:01:11,960 --> 00:01:16,890
Let's refactor some of our code to start
to see the full power of the on method.

21
00:01:16,890 --> 00:01:21,030
If you don't have the spoiler revealer
project open from the previous video, open

22
00:01:21,030 --> 00:01:25,770
the workspace with this video, head down
to the click method and replace with on.

23
00:01:27,250 --> 00:01:30,830
Next we wanna pass in the event
name as the first parameter here.

24
00:01:33,190 --> 00:01:34,920
Event name is click.

25
00:01:34,920 --> 00:01:38,780
We will leave the handler as
is as the second parameter.

26
00:01:38,780 --> 00:01:40,160
Lets save and preview.

27
00:01:41,240 --> 00:01:43,900
When we click the button it
works the same as it did before.

28
00:01:43,900 --> 00:01:46,550
The spoiler is revealed and
the button is hidden.

29
00:01:46,550 --> 00:01:49,130
However now we could add
another event if we wanted.

30
00:01:50,140 --> 00:01:53,535
Add a space after the click event and
then add mouseleave.

31
00:01:55,380 --> 00:01:57,840
So let's save and refresh.

32
00:01:57,840 --> 00:02:01,430
So move your cursor over the button and
nothing happens.

33
00:02:01,430 --> 00:02:04,620
Move your cursor away from the button and
the button disappears and

34
00:02:04,620 --> 00:02:05,690
the spoiler shows.

35
00:02:06,830 --> 00:02:12,700
Refresh the page, move your mouse over and
then click, the handler triggers again.

36
00:02:12,700 --> 00:02:16,910
As you can see, on is useful if you
want some code to fire after one or

37
00:02:16,910 --> 00:02:18,230
more events.

38
00:02:18,230 --> 00:02:21,600
Let's get rid of mouseleave for now,
as that was just for demonstration.

39
00:02:21,600 --> 00:02:26,360
In the next video, I'll show you another
way the on method can be useful.