Bem-vindo ao site John Pires!

Javascript – Fund. Básicos

Início/Curso/Javascript – Fund. Básicos

Javascript – Fund. Básicos

Javascript – Aprendendo Eventos



O que é um evento?

A interação do JavaScript com o HTML é tratada por meio de eventos que ocorrem quando o usuário ou o navegador manipula uma página.

Quando a página é carregada, é chamado de evento. Quando o usuário clica em um botão, esse clique também é um evento. Outros exemplos incluem eventos como pressionar qualquer tecla, fechar uma janela, redimensionar uma janela, etc.

Os desenvolvedores podem usar esses eventos para executar respostas codificadas em JavaScript, o que faz com que os botões fechem as janelas, as mensagens sejam exibidas aos usuários, os dados sejam validados e virtualmente qualquer outro tipo de resposta imaginável.

Os eventos fazem parte do Document Object Model (DOM) Nível 3 e cada elemento HTML contém um conjunto de eventos que podem acionar o código JavaScript.

Por favor, siga este pequeno tutorial para uma melhor compreensão da Referência de Eventos HTML. Aqui, veremos alguns exemplos para entender a relação entre Evento e JavaScript.

Evento onclick




Este é o tipo de evento usado com mais frequência que ocorre quando um usuário clica com o botão esquerdo do mouse. Você pode colocar sua validação, aviso, etc., contra este tipo de evento.
Exemplo

Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

Evento onsubmit




onsubmit é um evento que ocorre quando você tenta enviar um formulário. Você pode colocar sua validação de formulário contra este tipo de evento.
Exemplo

O exemplo a seguir mostra como usar o onsubmit. Aqui, estamos chamando uma função validate () antes de enviar os dados do formulário ao servidor da web. Se a função validate () retornar true, o formulário será enviado, caso contrário, não enviará os dados.

Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

Eventos onmouseover e onmouseout



Esses dois tipos de eventos o ajudarão a criar bons efeitos com imagens ou até mesmo com texto. O evento onmouseover dispara quando você passa o mouse sobre qualquer elemento e o evento onmouseout dispara quando você move o mouse para fora desse elemento. Experimente o seguinte exemplo.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

Eventos padrão HTML 5



Os eventos HTML 5 padrão estão listados aqui para sua referência. Aqui, o script indica uma função Javascript a ser executada nesse evento.

Atributo   Valor Descrição
Offline script Aciona quando o documento fica offline
Onabort script Aciona em um evento de aborto
onafterprint script Aciona após o documento ser impresso
onbeforeonload script Aciona antes de o documento carregar
onbeforeprint script Aciona antes de o documento ser impresso
onblur script Aciona quando a janela perde o foco
oncanplay script Aciona quando a mídia pode iniciar a reprodução, mas pode ter que parar para armazenamento em buffer
oncanplaythrough script Aciona quando a mídia pode ser reproduzida até o fim, sem parar para armazenamento em buffer
onchange script Aciona quando um elemento muda
onclick script Dispara com um clique do mouse
oncontextmenu script Aciona quando um menu de contexto é acionado
ondblclick script Dispara com um clique duplo do mouse
ondrag script Aciona quando um elemento é arrastado
ondragend script Aciona no final de uma operação de arrastar
ondragenter script Aciona quando um elemento é arrastado para um destino de soltar válido
ondragleave script Aciona quando um elemento está sendo arrastado sobre um destino de soltar válido
ondragover script Aciona no início de uma operação de arrastar
ondragstart script Aciona no início de uma operação de arrastar
ondrop script Aciona quando o elemento arrastado está sendo solto
ondurationchange script Aciona quando o comprimento da mídia é alterado
onemptied script Aciona quando um elemento de recurso de mídia fica vazio repentinamente.
onended script Aciona quando a mídia chega ao fim
onerror script Aciona quando ocorre um erro
onfocus script Aciona quando a janela ganha o foco
onformchange script Aciona quando um formulário muda
onforminput script Aciona quando um formulário recebe a entrada do usuário
onhaschange script Aciona quando o documento muda
oninput script Aciona quando um elemento obtém a entrada do usuário
oninvalid script Aciona quando um elemento é inválido
onkeydown script Aciona quando uma tecla é pressionada
onkeypress script Aciona quando uma tecla é pressionada e liberada
onkeyup script Aciona quando uma tecla é liberada
onload script Aciona quando o documento carrega
onloadeddata script Aciona quando os dados da mídia são carregados
onloadedmetadata script Aciona quando a duração e outros dados de mídia de um elemento de mídia são carregados
onloadstart script Aciona quando o navegador começa a carregar os dados de mídia
onmessage script Aciona quando a mensagem é acionada
onmousedown script Aciona quando um botão do mouse é pressionado
onmousemove script Aciona quando o ponteiro do mouse se move
onmouseout script Aciona quando o ponteiro do mouse sai de um elemento
onmouseover script Aciona quando o ponteiro do mouse se move sobre um elemento
onmouseup script Aciona quando um botão do mouse é liberado
onmousewheel script Aciona quando a roda do mouse está sendo girada
onoffline script Aciona quando o documento fica offline
onoine script Aciona quando o documento fica online
ononline script Aciona quando o documento fica online
onpagehide script Aciona quando a janela está oculta
onpageshow script Aciona quando a janela se torna visível
onpause script Aciona quando os dados de mídia são pausados
onplay script Aciona quando os dados de mídia vão começar a ser reproduzidos
onplaying script Aciona quando os dados de mídia começam a ser reproduzidos
onpopstate script Aciona quando o histórico da janela muda
onprogress script Aciona quando o navegador busca os dados de mídia
onratechange script Aciona quando a taxa de reprodução dos dados de mídia muda
onreadystatechange script Aciona quando o estado de prontidão muda
onredo script Aciona quando o documento executa um refazer
onresize script Aciona quando a janela é redimensionada
onscroll script Aciona quando a barra de rolagem de um elemento está sendo rolada
onseeked script Aciona quando o atributo de busca de um elemento de mídia não é mais verdadeiro e a busca termina
onseeking script Aciona quando o atributo de busca de um elemento de mídia é verdadeiro e a busca começa
onselect script Aciona quando um elemento é selecionado
onstalled script Aciona quando há um erro na busca de dados de mídia
onstorage script Aciona quando um documento é carregado
onsubmit script Aciona quando um formulário é enviado
onsuspend script Aciona quando o navegador busca dados de mídia, mas é interrompido antes que todo o arquivo de mídia seja buscado
ontimeupdate script Aciona quando a mídia muda sua posição de reprodução
onundo script Aciona quando um documento desfaz
onunload script Aciona quando o usuário sai do documento
onvolumechange script Aciona quando a mídia altera o volume, também quando o volume está definido como “mudo”
onwaiting script Aciona quando a mídia para de reproduzir, mas espera-se que retome



Deixe um comentário

Copyright John Pires - Todos os direitos reservados

ENTRAR

Esqueceu a senha

Message modal