Eventos em JavaScript: addEventListener e removeEventListener

Os eventos são ações que o utilizador pode desencadear: um clique num botão, escrever texto num formulário, etc. Em JavaScript, usamos os gestores de eventos para executar código em resposta a esses eventos.

Eventos correntes em JavaScript

Há muitos eventos de uso frequente em JavaScript. Ficam aqui alguns exemplos:

• click: disparado quando o utilizador clica num elemento
• mouseover: disparado quando o utilizador passa o rato por cima de um elemento
• submit: disparado quando o utilizador submete um formulário
• focus: disparado quando o utilizador põe o foco num elemento (ao clicar num campo de formulário, por exemplo)

Há muitos outros eventos que podem ser disparados durante a interação do utilizador, como «change», «keyup», «keydown», etc. Encontras uma lista mais completa de eventos aqui: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Acrescentar um gestor de eventos a um elemento

Há várias maneiras de acrescentar um gestor de eventos a um elemento do DOM. A primeira consiste em usar a propriedade do próprio elemento. Por exemplo, para acrescentar um gestor de clique a um botão:

const button = document.querySelector('button');
button.onclick = function() {
    console.log('Bouton cliqué');
}

Também podes usar o método addEventListener, que permite acrescentar vários gestores de eventos ao mesmo elemento:

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focus');
});
input.addEventListener('blur', function() {
    console.log('Input blur');
});

E existe o método removeEventListener para retirar um gestor de eventos de um elemento:

// a nossa função anónima
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// Acrescentamos o nosso evento
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Mais à frente no código, retiramos este evento por X ou Y motivos
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

Neste exemplo, o gestor de eventos «click» associado à função «maFonctionAnonyme» é retirado do botão.

Conclusão

Usando os eventos e os gestores de eventos, pode criar interações em tempo real com o seu site e torná-lo mais dinâmico e agradável para os utilizadores. O próximo capítulo apresenta os módulos e as importações/exportações (ES6), que dividem o código em ficheiros, as classes, por sua vez, são detalhadas no artigo sobre as classes em JavaScript.