Capítulo 24: Eventos e Listeners em Javascript

Eventos em Javascript são ações ou ocorrências que acontecem no sistema que você está programando, seja um clique do mouse, uma página carregando ou um toque em uma tecla. Os Eventos são um dos principais mecanismos que permitem a interação entre o usuário e a interface.

Em termos de desenvolvimento web, os eventos são acionados no navegador, como um clique do mouse, uma página carregando, um toque em uma tecla, etc. Esses eventos podem ser capturados e manipulados usando Javascript, permitindo a criação de interfaces de usuário interativas e dinâmicas.

Event Listeners

Os Event Listeners, ou ouvintes de eventos, são funções que ficam 'ouvindo' algum tipo específico de evento acontecer. Quando esse evento ocorre, o Event Listener é acionado e executa uma ação.

Para se adicionar um Event Listener a um elemento HTML, utilizamos o método 'addEventListener'. Esse método recebe dois parâmetros: o nome do evento que se quer ouvir e a função que será executada quando o evento ocorrer.

elemento.addEventListener('click', function() {
    // Código a ser executado quando o evento ocorrer
});

Os Event Listeners são uma parte fundamental da programação em Javascript para a web, pois permitem a interação do usuário com a página. Sem eles, a página seria completamente estática e não teria como reagir às ações do usuário.

Tipos de Eventos

Existem diversos tipos de eventos que podem ser ouvidos em Javascript. Alguns dos mais comuns incluem:

• click: acionado quando o usuário clica em um elemento;
• dblclick: acionado quando o usuário clica duas vezes em um elemento;
• mouseover: acionado quando o cursor do mouse passa sobre um elemento;
• mouseout: acionado quando o cursor do mouse sai de um elemento;
• keydown: acionado quando o usuário pressiona uma tecla;
• load: acionado quando a página termina de carregar.

Manipulando Eventos

Ao manipular eventos, é comum que se queira acessar o elemento que acionou o evento. Isso pode ser feito através do objeto 'event' que é passado automaticamente para a função que está sendo executada pelo Event Listener. Esse objeto contém diversas informações sobre o evento, incluindo o elemento que o acionou.

elemento.addEventListener('click', function(event) {
    console.log('O elemento que foi clicado é: ', event.target);
});

Além disso, também é possível impedir que o comportamento padrão de um evento aconteça. Isso é feito através do método 'preventDefault' do objeto 'event'.

elemento.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('O click não terá o efeito padrão.');
});

Eventos e Listeners em Javascript são uma parte fundamental do desenvolvimento web. Eles permitem a criação de interfaces de usuário interativas e dinâmicas, respondendo às ações do usuário em tempo real. Portanto, é essencial que todo desenvolvedor Front End tenha um bom entendimento sobre eles.