0:00:00.461,0:00:05.742
Now I want to show you one more thing[br]that you could do with the `event` object.

0:00:05.742,0:00:09.936
This webpage that I've made[br]answers the eternal question:

0:00:09.936,0:00:12.150
"What does Oh Noes say?"

0:00:12.150,0:00:16.599
Or, more specifically, what would[br]he sound like if you could hear him?

0:00:16.599,0:00:20.589
If you click on the link,[br]you'll be brought to an mp3 file

0:00:20.589,0:00:25.163
that should play in the browser and[br]answer that burning question for you.

0:00:25.163,0:00:30.009
However, I don't want the user[br]to have to leave the webpage.

0:00:30.009,0:00:33.445
You should be able to hear it[br]directly on the page.

0:00:33.445,0:00:37.891
We can do that with JavaScript,[br]by playing an `` tag

0:00:37.891,0:00:40.957
as soon as the user clicks the link.

0:00:40.957,0:00:45.109
First, let's store the link[br]in a variable.

0:00:45.109,0:00:48.078
(typing)

0:00:55.770,0:00:58.099
Now let's define a callback function.

0:00:58.099,0:01:03.735
This is going to be[br]a pretty interesting one.

0:01:03.735,0:01:10.165
So in that callback function, we want[br]to create an audio tag dynamically.

0:01:10.165,0:01:12.033
(typing)

0:01:15.816,0:01:19.825
And this is a nice new tag[br]available in modern browsers.

0:01:19.825,0:01:26.104
And then audio.src equals--[br]and we're going to set it equal to

0:01:26.104,0:01:32.563
what the `href` is up here--[br]the audio tag is a lot like the image tag.

0:01:32.563,0:01:37.335
And then we're also going to say[br]`audioEl.autoplay = true`,

0:01:37.335,0:01:40.333
that'll make it play as soon as[br]we add it to the page.

0:01:40.333,0:01:42.953
And finally, we add it to the page.

0:01:42.953,0:01:45.574
And it doesn't really matter[br]where I put it,

0:01:45.574,0:01:48.064
since we're not really visualizing it.

0:01:48.064,0:01:52.295
So now, when they click, it should[br]create an audio, set the source,

0:01:52.295,0:01:55.387
set it to autoplay,[br]and add it to the page.

0:01:55.387,0:01:59.444
Finally, we make sure that[br]the event listener is called

0:01:59.444,0:02:01.376
when the link is clicked.

0:02:01.376,0:02:03.723
(typing)

0:02:08.283,0:02:12.951
...and then we just pass in[br]the name of the function.

0:02:12.951,0:02:17.385
Okay, you know the deal:[br]pause the talk-through, try it out.

0:02:17.385,0:02:19.729
♪ humming ♪

0:02:19.729,0:02:21.110
What happened?

0:02:21.110,0:02:26.337
For me, the sound plays--[br]that low, deep grumble of Oh Noes--

0:02:26.337,0:02:29.789
but the link still opens up[br]in a new window.

0:02:29.789,0:02:33.476
Ideally, once that sound played,[br]the browser would no longer

0:02:33.476,0:02:37.548
try to navigate the user to the link[br]because they've already heard it.

0:02:37.548,0:02:42.920
The way to do this is to tell the browser[br]to cancel its default behavior.

0:02:42.920,0:02:47.148
You see, by default,[br]when a user clicks a link

0:02:47.148,0:02:50.321
the browser navigates[br]the user to that link.

0:02:50.321,0:02:54.226
But if we've overridden the way[br]that the link works, in JavaScript,

0:02:54.226,0:02:58.004
we often don't want the browser[br]to do that navigation.

0:02:58.004,0:03:02.731
We can tell it to stop by using[br]a method on the `event` property

0:03:02.731,0:03:05.299
called `preventDefault()`.

0:03:05.299,0:03:09.897
So we need to refer to that[br]event object that we get passed,

0:03:09.897,0:03:15.830
and then inside here, we say:[br]`e.preventDefault();`

0:03:15.830,0:03:19.420
This should tell the browser[br]to prevent the default behavior

0:03:19.420,0:03:21.399
associated with this event.

0:03:21.399,0:03:25.995
Now pause the talk-through,[br]and try it again.

0:03:25.995,0:03:28.385
You just heard the sound, right?

0:03:28.385,0:03:30.949
That is a much nicer user experience.

0:03:30.949,0:03:34.959
And that is what is known as[br]"progressive enhancement"--

0:03:34.959,0:03:39.514
starting the webpage as HTML with[br]the default browser behavior

0:03:39.514,0:03:44.650
but then enhancing it with JavaScript[br]to be a richer experience.

0:03:44.650,0:03:48.361
You'll often want to use this[br]`preventDefault` when you're

0:03:48.361,0:03:50.445
attaching click listeners to links.

0:03:50.445,0:03:54.447
And you may also find yourself using it[br]when you're doing form processing,

0:03:54.447,0:03:57.485
since the browser does some[br]default behavior there as well,

0:03:57.485,0:03:59.264
submitting to a server.

0:03:59.264,0:04:02.640
The important thing is to keep[br]the user experience in mind,

0:04:02.640,0:04:06.730
and if the user experience[br]isn't optimal on your webpage,

0:04:06.730,0:04:08.953
figure out how to make it better.

0:04:08.953,0:04:11.366
We may not be able[br]to teach you everything here,

0:04:11.366,0:04:15.499
but the Internet has[br]thousands of answers for you.