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.