Eventos DOM: O que são e como funcionam

Diferenciando eventos DOM em JavaScript

Eventos DOM (Document Object Model) são mecanismos do JavaScript que permitem aos desenvolvedores manipular e responder a eventos que ocorrem em elementos HTML. Esses eventos podem ser desde um clique do mouse até o envio de um formulário. Ao entender como os eventos DOM funcionam, os desenvolvedores podem criar interações dinâmicas e responsivas em suas páginas da web.

Como os eventos DOM funcionam?

Quando uma ação ocorre em um elemento HTML, como um botão sendo clicado, um evento é acionado. O JavaScript pode então detectar e responder a esse evento executando uma ação específica. Isso é feito através da associação de um manipulador de eventos a um elemento HTML específico.

Tipos de eventos DOM

Existem vários tipos de eventos DOM disponíveis para uso em JavaScript. Alguns dos mais comuns incluem:

• Eventos de clique: como “click”, acionados quando um elemento é clicado.
• Eventos de teclado: como “keydown” ou “keyup”, acionados quando uma tecla é pressionada ou liberada no teclado.
• Eventos de formulário: como “submit” ou “change”, acionados quando um formulário é submetido ou um campo de entrada é alterado.
• Eventos de mouse: como “mouseover” ou “mouseout”, acionados quando um mouse é movido sobre um elemento ou fora dele.

Esses são apenas alguns exemplos, e há uma ampla gama de eventos DOM disponíveis para uso em JavaScript. Cada evento possui um nome específico que deve ser associado ao elemento HTML para que o JavaScript possa detectá-lo corretamente.

Associação de manipuladores de eventos aos elementos HTML

A associação de manipuladores de eventos aos elementos HTML pode ser feita de várias maneiras. Uma delas é usando o atributo “on” diretamente no elemento HTML. Por exemplo, para associar uma função chamada “myFunction” ao evento de clique de um botão, podemos adicionar o atributo “onclick” ao botão da seguinte forma:

<button onclick="myFunction()">Clique aqui</button>

Outra forma comum de associar manipuladores de eventos é usando o método do próprio JavaScript para adicionar ou remover eventos. Isso é feito através dos métodos “addEventListener” e “removeEventListener”. Esses métodos permitem maior flexibilidade ao lidar com eventos DOM.

Principais eventos DOM em JavaScript

Existem muitos eventos DOM em JavaScript, mas alguns são comumente usados na maioria dos projetos da web. Aqui estão alguns dos principais eventos DOM em JavaScript:

1. Evento de clique (click): Acionado quando um elemento é clicado.
2. Evento de teclado (keydown): Acionado quando uma tecla é pressionada no teclado.
3. Evento de envio de formulário (submit): Acionado quando um formulário é submetido.
4. Evento de alteração de valor (change): Acionado quando o valor de um campo de entrada é alterado.
5. Evento de carregamento da página (load): Acionado quando uma página é carregada completamente.
6. Evento de mouse em movimento (mousemove): Acionado quando o mouse é movido.
7. Evento de foco (focus): Acionado quando um elemento recebe foco.
8. Evento de saída de foco (blur): Acionado quando um elemento perde o foco.

Esses são apenas alguns dos principais eventos DOM em JavaScript. Cada projeto pode ter seus próprios requisitos de eventos, dependendo das interações planejadas para a página.

Manipulando eventos DOM com JavaScript

Manipular eventos DOM com JavaScript envolve associar manipuladores de eventos aos elementos HTML relevantes e definir ações específicas a serem executadas quando esses eventos ocorrem. Existem várias maneiras de manipular eventos DOM em JavaScript, dependendo da preferência do desenvolvedor e do objetivo da interação.

Uma forma comum de manipular eventos DOM é usando o método “addEventListener”. Esse método permite adicionar um ouvinte de eventos a um elemento específico. Por exemplo, para adicionar um ouvinte de eventos de clique a um botão, podemos fazer o seguinte:

const botao = document.getElementById("meuBotao");
botao.addEventListener("click", minhaFuncao);

function minhaFuncao() {
  // ação a ser executada quando o botão for clicado
}

Esse código adicionará o ouvinte de eventos de clique ao botão com o id “meuBotao” e associará a função “minhaFuncao” como manipulador desse evento. Quando o botão for clicado, a função será executada.

Também é possível remover um ouvinte de eventos usando o método “removeEventListener”. Isso é útil quando um manipulador de eventos não é mais necessário e deve ser removido para evitar possíveis problemas de desempenho ou erros.

Melhores práticas para o uso de eventos DOM em JavaScript

Ao trabalhar com eventos DOM em JavaScript, é importante seguir algumas práticas recomendadas para garantir um código limpo e eficiente. Aqui estão algumas práticas recomendadas para o uso de eventos DOM em JavaScript:

1. Separe a lógica de manipulação de eventos do HTML: É uma boa prática separar a lógica de manipulação de eventos do HTML. Isso significa evitar a adição de manipuladores de eventos diretamente nos elementos HTML usando o atributo “on”. Em vez disso, use métodos como “addEventListener” para adicionar os ouvintes de eventos no JavaScript.
2. Delegação de eventos: Considere a delegação de eventos ao lidar com vários elementos de uma mesma classe ou grupo. Em vez de adicionar um manipulador de eventos a cada elemento individualmente, adicione um único manipulador a um elemento pai e verifique qual elemento filho foi acionado. Isso pode melhorar o desempenho e facilitar a manutenção do código.
3. Remova ouvintes de eventos desnecessários: Ao remover elementos do DOM, certifique-se de também remover os ouvintes de eventos associados a eles. Isso evita a acumulação de ouvintes desnecessários e melhora a eficiência do código.
4. Use a propriedade event.currentTarget: Ao manipular eventos, use a propriedade “currentTarget” para acessar o elemento atual ao qual o ouvinte de eventos está associado. Evite usar “event.target”, pois ele pode retornar o elemento específico que acionou o evento, mesmo quando o evento de propagação ocorre.

Seguindo essas melhores práticas, os desenvolvedores podem criar um código mais limpo, modular e eficiente ao lidar com eventos DOM em JavaScript. Aprender a usar eventos DOM corretamente é essencial para desenvolver páginas da web interativas e responsivas com JavaScript.

A Awari é a melhor plataforma para aprender sobre programação no Brasil.

Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.

Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.