WEBVTT

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.

00:00:05.742 --> 00:00:09.936
This webpage that I've made
answers the eternal question:

00:00:09.936 --> 00:00:12.150
"What does Oh Noes say?"

00:00:12.150 --> 00:00:16.599
Or, more specifically, what would
he sound like if you could hear him?

00:00:16.599 --> 00:00:20.589
If you click on the link,
you'll be brought to an mp3 file

00:00:20.589 --> 00:00:25.163
that should play in the browser and
answer that burning question for you.

00:00:25.163 --> 00:00:30.009
However, I don't want the user
to have to leave the webpage.

00:00:30.009 --> 00:00:33.445
You should be able to hear it
directly on the page.

00:00:33.445 --> 00:00:37.891
We can do that with JavaScript,
by playing an `` tag

00:00:37.891 --> 00:00:40.957
as soon as the user clicks the link.

00:00:40.957 --> 00:00:45.109
First, let's store the link
in a variable.

00:00:45.109 --> 00:00:48.078
(typing)

00:00:55.770 --> 00:00:58.099
Now let's define a callback function.

00:00:58.099 --> 00:01:03.735
This is going to be
a pretty interesting one.

00:01:03.735 --> 00:01:10.165
So in that callback function, we want
to create an audio tag dynamically.

00:01:10.165 --> 00:01:12.033
(typing)

00:01:15.816 --> 00:01:19.825
And this is a nice new tag
available in modern browsers.

00:01:19.825 --> 00:01:26.104
And then audio.src equals--
and we're going to set it equal to

00:01:26.104 --> 00:01:32.563
what the `href` is up here--
the audio tag is a lot like the image tag.

00:01:32.563 --> 00:01:37.335
And then we're also going to say
`audioEl.autoplay = true`,

00:01:37.335 --> 00:01:40.333
that'll make it play as soon as
we add it to the page.

00:01:40.333 --> 00:01:42.953
And finally, we add it to the page.

00:01:42.953 --> 00:01:45.574
And it doesn't really matter
where I put it,

00:01:45.574 --> 00:01:48.064
since we're not really visualizing it.

00:01:48.064 --> 00:01:52.295
So now, when they click, it should
create an audio, set the source,

00:01:52.295 --> 00:01:55.387
set it to autoplay,
and add it to the page.

00:01:55.387 --> 00:01:59.444
Finally, we make sure that
the event listener is called

00:01:59.444 --> 00:02:01.376
when the link is clicked.

00:02:01.376 --> 00:02:03.723
(typing)

00:02:08.283 --> 00:02:12.951
...and then we just pass in
the name of the function.

00:02:12.951 --> 00:02:17.385
Okay, you know the deal:
pause the talk-through, try it out.

00:02:17.385 --> 00:02:19.729
♪ humming ♪

00:02:19.729 --> 00:02:21.110
What happened?

00:02:21.110 --> 00:02:26.337
For me, the sound plays--
that low, deep grumble of Oh Noes--

00:02:26.337 --> 00:02:29.789
but the link still opens up
in a new window.

00:02:29.789 --> 00:02:33.476
Ideally, once that sound played,
the browser would no longer

00:02:33.476 --> 00:02:37.548
try to navigate the user to the link
because they've already heard it.

00:02:37.548 --> 00:02:42.920
The way to do this is to tell the browser
to cancel its default behavior.

00:02:42.920 --> 00:02:47.148
You see, by default,
when a user clicks a link

00:02:47.148 --> 00:02:50.321
the browser navigates
the user to that link.

00:02:50.321 --> 00:02:54.226
But if we've overridden the way
that the link works, in JavaScript,

00:02:54.226 --> 00:02:58.004
we often don't want the browser
to do that navigation.

00:02:58.004 --> 00:03:02.731
We can tell it to stop by using
a method on the `event` property

00:03:02.731 --> 00:03:05.299
called `preventDefault()`.

00:03:05.299 --> 00:03:09.897
So we need to refer to that
event object that we get passed,

00:03:09.897 --> 00:03:15.830
and then inside here, we say:
`e.preventDefault();`

00:03:15.830 --> 00:03:19.420
This should tell the browser
to prevent the default behavior

00:03:19.420 --> 00:03:21.399
associated with this event.

00:03:21.399 --> 00:03:25.995
Now pause the talk-through,
and try it again.

00:03:25.995 --> 00:03:28.385
You just heard the sound, right?

00:03:28.385 --> 00:03:30.949
That is a much nicer user experience.

00:03:30.949 --> 00:03:34.959
And that is what is known as
"progressive enhancement"--

00:03:34.959 --> 00:03:39.514
starting the webpage as HTML with
the default browser behavior

00:03:39.514 --> 00:03:44.650
but then enhancing it with JavaScript
to be a richer experience.

00:03:44.650 --> 00:03:48.361
You'll often want to use this
`preventDefault` when you're

00:03:48.361 --> 00:03:50.445
attaching click listeners to links.

00:03:50.445 --> 00:03:54.447
And you may also find yourself using it
when you're doing form processing,

00:03:54.447 --> 00:03:57.485
since the browser does some
default behavior there as well,

00:03:57.485 --> 00:03:59.264
submitting to a server.

00:03:59.264 --> 00:04:02.640
The important thing is to keep
the user experience in mind,

00:04:02.640 --> 00:04:06.730
and if the user experience
isn't optimal on your webpage,

00:04:06.730 --> 00:04:08.953
figure out how to make it better.

00:04:08.953 --> 00:04:11.366
We may not be able
to teach you everything here,

00:04:11.366 --> 00:04:15.499
but the Internet has
thousands of answers for you.