< Return to Video

Preventing default behavior of events (Video Version)

  • 0:00 - 0:06
    Agora quero mostrá-los mais uma coisa
    que você pode fazer o objeto evento
  • 0:06 - 0:10
    Esta página que eu fiz responde
    a eterna questão
  • 0:10 - 0:12
    "O que Noes disse?"
  • 0:12 - 0:17
    Ou, mais específico, como ele soaria
    se você pudesse ouvi-lo
  • 0:17 - 0:21
    Se você clicar no link,
    você será levado a um arquivo mp3
  • 0:21 - 0:25
    que deve tocar no navegador e
    responder esta questão para você.
  • 0:25 - 0:30
    No entanto, eu não quero que o usuário
    precise deixar a página.
  • 0:30 - 0:33
    Você deve ouvir diretamente na página.
  • 0:33 - 0:38
    Podemos fazer isso com JavaScript
    tocando uma tag
  • 0:38 - 0:41
    assim que o usuário clicar no link.
  • 0:41 - 0:45
    Primeiro, vamos guardar o link
    em uma variável.
  • 0:45 - 0:48
    (escrevendo)
  • 0:56 - 0:58
    Agora vamos definir uma função de retorno.
  • 0:58 - 1:04
    Esta será uma interessante.
  • 1:04 - 1:10
    Então, na função de retorno, nós queremos
    criar uma tag audio dinamicamente
  • 1:10 - 1:12
    (escrevendo)
  • 1:16 - 1:20
    E esta é uma ótima nova tag
    disponível no navegadores modernos.
  • 1:20 - 1:26
    E então audio.src igual--
    e vamos configurá-lo igual a
  • 1:26 - 1:33
    este 'href' aqui--
    a tag audio é bem parecida com a tag image
  • 1:33 - 1:37
    E então vamos também dize
    'audioEl.autoplay = true',
  • 1:37 - 1:40
    isto fará ele tocar assim que
    nós adicionarmos à página.
  • 1:40 - 1:43
    E finalmente, nós adicionamos à página.
  • 1:43 - 1:46
    E, de fato, não importa onde eu coloco ele
  • 1:46 - 1:48
    uma vez que não estamos mesmo vendo ele.
  • 1:48 - 1:52
    Agora, quando eles clicam, deve ser criado
    uma áudio, configurar a fonte,
  • 1:52 - 1:55
    configurar para autoplay, e
    adicioná-lo à página.
  • 1:55 - 1:59
    Finalmente, nós certificamo-nos
    que o ouvinte do evento é chamado
  • 1:59 - 2:01
    quando o link é clicado.
  • 2:01 - 2:04
    (escrevendo)
  • 2:08 - 2:13
    ...e então nós passamos no nome
    da função.
  • 2:13 - 2:17
    Ok, você sabe o que fazer:
    Pausa na conversa e tente.
  • 2:17 - 2:20
    hmmmm
  • 2:20 - 2:21
    O que aconteceu?
  • 2:21 - 2:26
    Para mim, o som toca--
    bem baixo, um resmungo de Oh Noes--
  • 2:26 - 2:30
    mas o link ainda abre num nova janela.
  • 2:30 - 2:33
    Idealmente, uma vez tocado o som
    o navegador não vai mais
  • 2:33 - 2:38
    tentar abrir o link porque ele já ouviu
  • 2:38 - 2:43
    A forma de fazer isso é dizer ao navegador
    para cancelar o comportamento padrão.
  • 2:43 - 2:47
    Você vê, por padrão, quando um link é clicaodo
  • 2:47 - 2:50
    o navegador leva o usuário até este link.
  • 2:50 - 2:54
    Mas se nós sobrescrevermos a forma
    como o link funciona, no JavaScript,
  • 2:54 - 2:58
    As vezes não queremos que o navegador
    navegue para o link.
  • 2:58 - 3:03
    Nós podemos dizer para ele parar usando
    um método na propriedade 'event'
  • 3:03 - 3:05
    chamado 'preventDefault()'.
  • 3:05 - 3:10
    Então precisamos referenciar o objeto
    que nós passamos
  • 3:10 - 3:16
    e então, aqui dentro, nós dizemos:
    'e.preventDefault();'
  • 3:16 - 3:19
    Isto deve dizer ao navegador
    para evitar o comportamento padrão
  • 3:19 - 3:21
    associado com este evento.
  • 3:21 - 3:26
    Agora vamos parar um pouco e
    tentar novamente
  • 3:26 - 3:28
    Você só ouviu o som, certo?
  • 3:28 - 3:31
    Esta é uma experiência de usuário
    bem melhor.
  • 3:31 - 3:35
    E isto é o que é conhecido como
    "melhoria progressiva"--
  • 3:35 - 3:40
    iniciando uma página web como HTML com
    o comportamento padrão do navegador
  • 3:40 - 3:45
    então melhorando com JavaScript para
    obter uma experiência melhor.
  • 3:45 - 3:48
    Você vai querer usar este 'prevendDefault'
    quando você estiver
  • 3:48 - 3:50
    anexando ouvidores de clicks nos links.
  • 3:50 - 3:54
    E você pode também se deparar usando
    no processamento de formulários,
  • 3:54 - 3:57
    uma vez que o navegador tem alguns
    comportamentos padrões lá,
  • 3:57 - 3:59
    enviando para o servidor.
  • 3:59 - 4:03
    É importante manter a experiência
    do usuário em mente,
  • 4:03 - 4:06
    e se ela não for ótima na sua página,
  • 4:06 - 4:08
    entenda como deixá-la melhor.
  • 4:08 - 4:11
    Nós não podemos ensinar
    tudo para você aqui,
  • 4:11 - 4:14
    mas a internet tem centenas
    de respostas pra você.
  • 4:14 - 4:16
    Legendado por Francis Pires
Title:
Preventing default behavior of events (Video Version)
Description:

more » « less
Video Language:
English
Duration:
04:17

Portuguese, Brazilian subtitles

Incomplete

Revisions