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