Agora quero mostrá-los mais uma coisa
que você pode fazer o objeto evento

Esta página que eu fiz responde
a eterna questão

"O que Noes disse?"

Ou, mais específico, como ele soaria
se você pudesse ouvi-lo

Se você clicar no link,
você será levado a um arquivo mp3

que deve tocar no navegador e
responder esta questão para você.

No entanto, eu não quero que o usuário
precise deixar a página.

Você deve ouvir diretamente na página.

Podemos fazer isso com JavaScript
tocando uma tag

assim que o usuário clicar no link.

Primeiro, vamos guardar o link
em uma variável.

(escrevendo)

Agora vamos definir uma função de retorno.

Esta será uma interessante.

Então, na função de retorno, nós queremos
criar uma tag audio dinamicamente

(escrevendo)

E esta é uma ótima nova tag 
disponível no navegadores modernos.

E então audio.src igual--
e vamos configurá-lo igual a

este 'href' aqui--
a tag audio é bem parecida com a tag image

E então vamos também dize
'audioEl.autoplay = true',

isto fará ele tocar assim que
nós adicionarmos à página.

E finalmente, nós adicionamos à página.

E, de fato, não importa onde eu coloco ele

uma vez que não estamos mesmo vendo ele.

Agora, quando eles clicam, deve ser criado
uma áudio, configurar a fonte,

configurar para autoplay, e
adicioná-lo à página.

Finalmente, nós certificamo-nos
que o ouvinte do evento é chamado

quando o link é clicado.

(escrevendo)

...e então nós passamos no nome
da função.

Ok, você sabe o que fazer:
Pausa na conversa e tente.

hmmmm

O que aconteceu?

Para mim, o som toca--
bem baixo, um resmungo de Oh Noes--

mas o link ainda abre num nova janela.

Idealmente, uma vez tocado o som
o navegador não vai mais

tentar abrir o link porque ele já ouviu

A forma de fazer isso é dizer ao navegador
para cancelar o comportamento padrão.

Você vê, por padrão, quando um link é clicaodo

o navegador leva o usuário até este link.

Mas se nós sobrescrevermos a forma
como o link funciona, no JavaScript,

As vezes não queremos que o navegador
navegue para o link.

Nós podemos dizer para ele parar usando
um método na propriedade 'event'

chamado 'preventDefault()'.

Então precisamos referenciar o objeto
que nós passamos

e então, aqui dentro, nós dizemos:
'e.preventDefault();'

Isto deve dizer ao navegador
para evitar o comportamento padrão

associado com este evento.

Agora vamos parar um pouco e 
tentar novamente

Você só ouviu o som, certo?

Esta é uma experiência de usuário
bem melhor.

E isto é o que é conhecido como
"melhoria progressiva"--

iniciando uma página web como HTML com
o comportamento padrão do navegador

então melhorando com JavaScript para
obter uma experiência melhor.

Você vai querer usar este 'prevendDefault'
quando você estiver

anexando ouvidores de clicks nos links.

E você pode também se deparar usando
no processamento de formulários,

uma vez que o navegador tem alguns
comportamentos padrões lá,

enviando para o servidor.

É importante manter a experiência 
do usuário em mente,

e se ela não for ótima na sua página,

entenda como deixá-la melhor.

Nós não podemos ensinar 
tudo para você aqui,

mas a internet tem centenas 
de respostas pra você.

Legendado por Francis Pires