Eventos

Existem duas maneiras de capturar um evento de um objeto do DOM:

Sintaxe 1:

objeto.nome_evento = function(){ corpo da função };

nome_evento: começa por on (ex: onclick).

Exemplo:

<body>  
   <h1 id='h1'>Cabeçalho</h1> 
   <script> 
      let h1 = document.getElementsByTagName('H1')[0]; 
      h1.onclick = function(){ 
         alert(h1.innerText); 
      } 
    </script> 
</body>

Sintaxe 2:

Nesta sintaxe, usa-se o método addEventListener():

object.addEventListener("nome_evento", funcao);

nome_evento: nome do evento
funcao: função que irá tratar o evento.

Exemplo 1:

<body>  
    <h1 id='h1'>Cabeçalho</h1> 
     
    <script> 
        function show(){ 
            alert(h1.innerText); 
        } 
        let h1 = document.getElementsByTagName('H1')[0]; 
 
        h1.addEventListener("click", show); 
    </script> 
</body>

Exemplo 2:

<body>  
    <h1 id='h1'>Cabeçalho</h1> 
     
    <script> 
        let h1 = document.getElementsByTagName('H1')[0]; 
 
        h1.addEventListener("click", function(){ 
            alert(h1.innerText); 
        }); 
   </script> 
</body>

Eventos mais comuns

EventoDescrição
changeUm elemento de HTML mudou
clickO utilizador clicou num elemento de HTML
dblclickO utilizador fez duplo clique num elemento de HTML
mouseoverO utilizador move o rato sobre um elemento de HTML
mouseoutO utilizador sai com o rato de um elemento de HTML
keyupO utilizador larga uma tecla
keydownO utilizador carrega numa tecla para baixo
focusUm elemento recebeu o foco (ex: caixa de texto)
loadO browser terminou de carregar uma página
submitUm formulário vai ser submetido