1
00:00:00,461 --> 00:00:05,742
Now I want to show you one more thing
that you could do with the `event` object.

2
00:00:05,742 --> 00:00:09,936
This webpage that I've made
answers the eternal question:

3
00:00:09,936 --> 00:00:12,150
"What does Oh Noes say?"

4
00:00:12,150 --> 00:00:16,599
Or, more specifically, what would
he sound like if you could hear him?

5
00:00:16,599 --> 00:00:20,589
If you click on the link,
you'll be brought to an mp3 file

6
00:00:20,589 --> 00:00:25,163
that should play in the browser and
answer that burning question for you.

7
00:00:25,163 --> 00:00:30,009
However, I don't want the user
to have to leave the webpage.

8
00:00:30,009 --> 00:00:33,445
You should be able to hear it
directly on the page.

9
00:00:33,445 --> 00:00:37,891
We can do that with JavaScript,
by playing an `` tag

10
00:00:37,891 --> 00:00:40,957
as soon as the user clicks the link.

11
00:00:40,957 --> 00:00:45,109
First, let's store the link
in a variable.

12
00:00:45,109 --> 00:00:48,078
(typing)

13
00:00:55,770 --> 00:00:58,099
Now let's define a callback function.

14
00:00:58,099 --> 00:01:03,735
This is going to be
a pretty interesting one.

15
00:01:03,735 --> 00:01:10,165
So in that callback function, we want
to create an audio tag dynamically.

16
00:01:10,165 --> 00:01:12,033
(typing)

17
00:01:15,816 --> 00:01:19,825
And this is a nice new tag
available in modern browsers.

18
00:01:19,825 --> 00:01:26,104
And then audio.src equals--
and we're going to set it equal to

19
00:01:26,104 --> 00:01:32,563
what the `href` is up here--
the audio tag is a lot like the image tag.

20
00:01:32,563 --> 00:01:37,335
And then we're also going to say
`audioEl.autoplay = true`,

21
00:01:37,335 --> 00:01:40,333
that'll make it play as soon as
we add it to the page.

22
00:01:40,333 --> 00:01:42,953
And finally, we add it to the page.

23
00:01:42,953 --> 00:01:45,574
And it doesn't really matter
where I put it,

24
00:01:45,574 --> 00:01:48,064
since we're not really visualizing it.

25
00:01:48,064 --> 00:01:52,295
So now, when they click, it should
create an audio, set the source,

26
00:01:52,295 --> 00:01:55,387
set it to autoplay,
and add it to the page.

27
00:01:55,387 --> 00:01:59,444
Finally, we make sure that
the event listener is called

28
00:01:59,444 --> 00:02:01,376
when the link is clicked.

29
00:02:01,376 --> 00:02:03,723
(typing)

30
00:02:08,283 --> 00:02:12,951
...and then we just pass in
the name of the function.

31
00:02:12,951 --> 00:02:17,385
Okay, you know the deal:
pause the talk-through, try it out.

32
00:02:17,385 --> 00:02:19,729
♪ humming ♪

33
00:02:19,729 --> 00:02:21,110
What happened?

34
00:02:21,110 --> 00:02:26,337
For me, the sound plays--
that low, deep grumble of Oh Noes--

35
00:02:26,337 --> 00:02:29,789
but the link still opens up
in a new window.

36
00:02:29,789 --> 00:02:33,476
Ideally, once that sound played,
the browser would no longer

37
00:02:33,476 --> 00:02:37,548
try to navigate the user to the link
because they've already heard it.

38
00:02:37,548 --> 00:02:42,920
The way to do this is to tell the browser
to cancel its default behavior.

39
00:02:42,920 --> 00:02:47,148
You see, by default,
when a user clicks a link

40
00:02:47,148 --> 00:02:50,321
the browser navigates
the user to that link.

41
00:02:50,321 --> 00:02:54,226
But if we've overridden the way
that the link works, in JavaScript,

42
00:02:54,226 --> 00:02:58,004
we often don't want the browser
to do that navigation.

43
00:02:58,004 --> 00:03:02,731
We can tell it to stop by using
a method on the `event` property

44
00:03:02,731 --> 00:03:05,299
called `preventDefault()`.

45
00:03:05,299 --> 00:03:09,897
So we need to refer to that
event object that we get passed,

46
00:03:09,897 --> 00:03:15,830
and then inside here, we say:
`e.preventDefault();`

47
00:03:15,830 --> 00:03:19,420
This should tell the browser
to prevent the default behavior

48
00:03:19,420 --> 00:03:21,399
associated with this event.

49
00:03:21,399 --> 00:03:25,995
Now pause the talk-through,
and try it again.

50
00:03:25,995 --> 00:03:28,385
You just heard the sound, right?

51
00:03:28,385 --> 00:03:30,949
That is a much nicer user experience.

52
00:03:30,949 --> 00:03:34,959
And that is what is known as
"progressive enhancement"--

53
00:03:34,959 --> 00:03:39,514
starting the webpage as HTML with
the default browser behavior

54
00:03:39,514 --> 00:03:44,650
but then enhancing it with JavaScript
to be a richer experience.

55
00:03:44,650 --> 00:03:48,361
You'll often want to use this
`preventDefault` when you're

56
00:03:48,361 --> 00:03:50,445
attaching click listeners to links.

57
00:03:50,445 --> 00:03:54,447
And you may also find yourself using it
when you're doing form processing,

58
00:03:54,447 --> 00:03:57,485
since the browser does some
default behavior there as well,

59
00:03:57,485 --> 00:03:59,264
submitting to a server.

60
00:03:59,264 --> 00:04:02,640
The important thing is to keep
the user experience in mind,

61
00:04:02,640 --> 00:04:06,730
and if the user experience
isn't optimal on your webpage,

62
00:04:06,730 --> 00:04:08,953
figure out how to make it better.

63
00:04:08,953 --> 00:04:11,366
We may not be able
to teach you everything here,

64
00:04:11,366 --> 00:04:15,499
but the Internet has
thousands of answers for you.