Javascript: Trabalhando com Event Listeners

Event Listeners em Javascript são blocos de código que permitem monitorar eventos em determinado objeto, como, por exemplo, detectar quando um formulário foi submetido ou um botão deixou de ser clicado. Também podemos definir para que uma função seja executada sempre que um evento for satisfeito.

Atualmente temos uma enorme gama de eventos, como clique do mouse, submissão de formulário, carregamento de página, touch em dispositivos móveis, inatividade de páginas, dentre outros.

Como você pode notar, Event Listeners é um mecanismo rico e com muitas utilidades, por tanto, nesse artigo nós vamos abordar os principais conceitos e a forma correta de utilização.

Lista de eventos

Na página oficial da Mozilla você pode ter uma ideia da quantidade de eventos que temos à nossa disposição. Em alguns casos, como, por exemplo, quando nossa página precisa “ouvir” o clique do mouse em um determinado elemento, devemos também criar um evento touch, garantindo que vai funcionar perfeitamente para usuários no mobile.

Evento de carregamento de página

Podemos criar um evento chamando a função addEventListener(), ela recebe no primeiro parâmetro do tipo de evento, enquanto no segundo, ela recebe uma função de callback.

document.addEventListener('DOMContentLoaded', () => {
    //Faça algo
})

Veja que no exemplo acima adicionamos um Event Listener ao document. O evento é DOMContentLoaded refere-se ao carregamento de todos os elementos DOM da página, ou seja, quando o navegador termina de construir os elementos da página.

O segundo parâmetro a gente colocou apenas um comentário, mas poderia ser qualquer código Javascript.

Evento em elementos da página

Para adicionar eventos a elementos da página, primeiramente devemos acessar esse elemento e depois adicionar o evento de escuta. Veja no exemplo abaixo que nós acessamos primeiro o elemento do formulário e só em seguida que o evento é adicionado.

<form action="#" id="frm-contato">
        <button type="submit">Enviar</button>
</form>

<script>
        document.querySelector('#frm-contato')
            .addEventListener('submit',
                (e) => {
                    console.log(e)
                })
</script>

Perceba que na função de callback a gente passou uma variável chamada “e”, ela contém o estado atual com todas as informações do nosso formulário. Incluímos um evento do tipo “submit” que é acionado quando o formulário é enviado.