Criando eventos em JavaScript com addEventListener

Como criar eventos em JavaScript (addEventListener)?

Adicionar eventos a elementos HTML é uma das partes mais importantes no desenvolvimento de páginas web interativas. O JavaScript oferece o método addEventListener para associar funções (também conhecidas como 'handlers') a diferentes tipos de eventos, como cliques, movimentos do mouse, teclas pressionadas e muitos outros. Com addEventListener, você pode criar páginas dinâmicas onde o comportamento do conteúdo depende das ações do usuário.

O que é addEventListener()?

O método addEventListener() permite associar um evento a um elemento do DOM. Ele aceita três parâmetros principais: o tipo de evento, a função que será executada quando o evento ocorrer, e um valor opcional que especifica se o evento será capturado durante a fase de captura ou propagação.

A sintaxe básica de addEventListener() é:

elemento.addEventListener(tipoDeEvento, funcaoDeEvento, usoCaptura);

Onde:

• tipoDeEvento é o nome do evento, como click, keydown, mouseover, etc.
• funcaoDeEvento é a função que será executada quando o evento ocorrer.
• usoCaptura é um parâmetro opcional que determina se o evento deve ser capturado na fase de captura (definido como true) ou na fase de propagação (definido como false, o padrão).

Exemplo básico de addEventListener()

Vamos ver um exemplo básico onde adicionamos um evento de clique a um botão, para alterar o texto quando ele for clicado.

let meuBotao = document.getElementById('meuBotao');

meuBotao.addEventListener('click', function() {
  alert('Botão foi clicado!');
});

Neste exemplo, addEventListener('click', function) associa um evento de clique ao botão com o id="meuBotao". Quando o botão é clicado, a função fornecida é executada, e um alerta é exibido.

Características do addEventListener()

• Suporte a múltiplos eventos: Com addEventListener(), você pode adicionar vários manipuladores de eventos ao mesmo elemento, o que facilita a criação de interações mais complexas.
• Não sobrescreve outros eventos: Ao contrário de alguns métodos mais antigos, como onclick, addEventListener() não substitui outros manipuladores de eventos que possam já estar associados ao mesmo elemento.
• Controle de fase de propagação: Você pode controlar se o evento deve ser capturado na fase de captura ou na fase de propagação, dando mais flexibilidade no controle do fluxo de eventos.

Removendo um evento com removeEventListener()

O método removeEventListener() é usado para remover um evento previamente associado a um elemento. A sintaxe é similar à de addEventListener(), mas você deve passar a mesma função de evento para removê-la.

Exemplo de código com removeEventListener():

let meuBotao = document.getElementById('meuBotao');

function minhaFuncao() {
  alert('Botão foi clicado!');
}

meuBotao.addEventListener('click', minhaFuncao);

// Removendo o evento
meuBotao.removeEventListener('click', minhaFuncao);

Aqui, a função minhaFuncao é associada ao evento de clique do botão, mas depois é removida com removeEventListener(). Essa abordagem permite desassociar eventos de maneira dinâmica.

Diferenças entre addEventListener() e atributos HTML de eventos

Embora seja possível associar eventos diretamente no HTML, como onclick, onmouseover, etc., o addEventListener() é uma abordagem mais moderna e flexível.

Quando usar addEventListener()?

• Use addEventListener() sempre que precisar adicionar múltiplos manipuladores de eventos a um único elemento ou quando precisar de mais controle sobre o fluxo de eventos.
• Evite atributos HTML para eventos (como onclick) sempre que possível, pois isso limita a flexibilidade de adicionar múltiplos manipuladores e dificulta a manutenção do código.

Exemplo prático de eventos múltiplos com addEventListener()

Veja um exemplo de como adicionar múltiplos eventos a um único elemento usando addEventListener():

let meuBotao = document.getElementById('meuBotao');

meuBotao.addEventListener('click', function() {
  console.log('Botão clicado!');
});

meuBotao.addEventListener('mouseover', function() {
  console.log('Mouse está sobre o botão!');
});

Aqui, meuBotao possui dois manipuladores de eventos: um para click e outro para mouseover. Isso permite que o botão tenha mais de uma interação ao mesmo tempo, sem a necessidade de substituir um evento pelo outro.

Conclusão

Usar addEventListener() é a maneira recomendada para adicionar eventos em JavaScript, pois oferece maior flexibilidade e controle sobre o comportamento de eventos em sua página. Além de permitir múltiplos manipuladores de eventos, ele também possibilita um controle preciso sobre a fase de propagação do evento. Ao aprender a usar addEventListener() e removeEventListener(), você será capaz de criar interfaces mais interativas e dinâmicas, com melhor gerenciamento de eventos.

Por que usar addEventListener() para gerenciar eventos em JavaScript?

A manipulação de eventos é uma parte crucial do desenvolvimento de páginas web interativas. Ao utilizar addEventListener(), você pode associar funções a eventos de maneira flexível e eficiente, sem sobrescrever eventos existentes. O método addEventListener() permite que você crie interações dinâmicas em tempo real, tornando as páginas mais responsivas ao comportamento do usuário. Além disso, você pode remover eventos com removeEventListener(), proporcionando um controle total sobre o ciclo de vida dos eventos em sua aplicação.

Algumas aplicações:

• Adicionar eventos de clique a botões, links e outros elementos interativos.
• Adicionar eventos de teclado, como keydown e keyup, para criar interações baseadas em entradas do usuário.
• Usar addEventListener() para gerenciar animações e transições de elementos, com base em eventos como mouseover ou scroll.
• Trabalhar com eventos de formulários, como submit, focus e input.

Dicas para quem está começando

• Comece adicionando eventos simples, como click, para se familiarizar com o método addEventListener().
• Pratique adicionando múltiplos manipuladores de eventos ao mesmo elemento usando addEventListener() para entender como gerenciar diferentes interações.
• Evite usar atributos de eventos no HTML, como onclick, para garantir que seu código seja mais modular e fácil de manter.
• Aprenda a usar removeEventListener() para remover eventos quando eles não forem mais necessários, o que pode otimizar o desempenho da sua aplicação.

Contribuições de

Andressa Maria

Desenvolvedora sênior com forte atuação em PHP, JavaScript e tecnologias de backend.

Mais sobre o autor

Compartilhe este tutorial