Preventing default behavior of events (Video Version)

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming

Now I want to show you one more thing
that you could do with the `event` object.

This webpage that I've made
answers the eternal question:

"What does Oh Noes say?"

Or, more specifically, what would
he sound like if you could hear him?

If you click on the link,
you'll be brought to an mp3 file

that should play in the browser and
answer that burning question for you.

However, I don't want the user
to have to leave the webpage.

You should be able to hear it
directly on the page.

We can do that with JavaScript,
by playing an `` tag

as soon as the user clicks the link.

First, let's store the link
in a variable.

(typing)

Now let's define a callback function.

This is going to be
a pretty interesting one.

So in that callback function, we want
to create an audio tag dynamically.

(typing)

And this is a nice new tag
available in modern browsers.

And then audio.src equals--
and we're going to set it equal to

what the `href` is up here--
the audio tag is a lot like the image tag.

And then we're also going to say
`audioEl.autoplay = true`,

that'll make it play as soon as
we add it to the page.

And finally, we add it to the page.

And it doesn't really matter
where I put it,

since we're not really visualizing it.

So now, when they click, it should
create an audio, set the source,

set it to autoplay,
and add it to the page.

Finally, we make sure that
the event listener is called

when the link is clicked.

(typing)

...and then we just pass in
the name of the function.

Okay, you know the deal:
pause the talk-through, try it out.

♪ humming ♪

What happened?

For me, the sound plays--
that low, deep grumble of Oh Noes--

but the link still opens up
in a new window.

Ideally, once that sound played,
the browser would no longer

try to navigate the user to the link
because they've already heard it.

The way to do this is to tell the browser
to cancel its default behavior.

You see, by default,
when a user clicks a link

the browser navigates
the user to that link.

But if we've overridden the way
that the link works, in JavaScript,

we often don't want the browser
to do that navigation.

We can tell it to stop by using
a method on the `event` property

called `preventDefault()`.

So we need to refer to that
event object that we get passed,

and then inside here, we say:
`e.preventDefault();`

This should tell the browser
to prevent the default behavior

associated with this event.

Now pause the talk-through,
and try it again.

You just heard the sound, right?

That is a much nicer user experience.

And that is what is known as
"progressive enhancement"--

starting the webpage as HTML with
the default browser behavior

but then enhancing it with JavaScript
to be a richer experience.

You'll often want to use this
`preventDefault` when you're

attaching click listeners to links.

And you may also find yourself using it
when you're doing form processing,

since the browser does some
default behavior there as well,

submitting to a server.

The important thing is to keep
the user experience in mind,

and if the user experience
isn't optimal on your webpage,

figure out how to make it better.

We may not be able
to teach you everything here,

but the Internet has
thousands of answers for you.