DOM Events é o que torna uma página da web interativa. Usar eventos DOM é o que faz uma página clicar ou enviar um formulário, permite que os desenvolvedores criem uma experiência de usuário envolvente.

Alguns exemplos de eventos DOM são quando um usuário clica com o mouse, quando uma página da web é carregada, quando uma imagem é carregada, quando um formulário HTML é enviado e quando um usuário pressiona uma tecla.

Neste artigo, simplificaremos os principais conceitos em eventos DOM e exploraremos como lidar com eles.

1. adicionarEventListener

addEventListener, anexa um manipulador de eventos aos elementos, permite definir como o elemento reage à interação do usuário com a página.

Exemplo: O código abaixo está adicionando um evento 'click' para exibir os detalhes do coquetel quando a imagem é clicada.

`img.addEventListener('click', () => handleClick(cocktail));`

2. seletor de consulta

querySelector, permite selecionar um elemento usando seletores do tipo CSS. É uma das formas mais versáteis de direcionar elementos.

Exemplo: Este código está criando uma seção recolhível na página da web. document.querySelectorAll está selecionando todos os elementos h3 na página da web e retorna um NodeList de todos os elementos correspondentes.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById e getElementsByClassName

getElementById tem como alvo um único elemento por seu ID exclusivo.

Da mesma forma, getElementsByClassName seleciona todos os elementos com uma classe específica e os retorna como uma coleção.

Exemplo: Abaixo, getElementById encontra um elemento por seu atributo id no documento HTML.

Está sendo usado aqui para acessar as entradas específicas do formulário, novo nome, novos ingredientes, nova imagem, nova receita e recuperar seus valores.

Esses valores são então armazenados nas propriedades do objeto newCocktail que é definido com const.

Desta forma, quando o usuário envia um formulário para criar um novo coquetel ele é armazenado de forma estruturada dentro do objeto newCocktail.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

O evento DOMContentLoaded garante que seu JavaScript seja executado somente depois que o DOM estiver totalmente carregado, evitando erros ao tentar acessar os elementos antes que eles estejam disponíveis.

Exemplo: DOMContentLoaded, é um evento que é acionado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens ou outros recursos externos sejam totalmente carregados.

Isso garante que o DOM seja totalmente construído e acessível, para que você possa interagir com segurança com elementos no HTML, como adicionar ouvintes de eventos ou manipular o DOM.

No código abaixo, o navegador está informando que o documento já está disponível e o usuário pode começar a interagir com ele.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Notas Finais

Os eventos DOM são fundamentais para tornar uma página da web interativa e envolvente para os usuários. Ao compreender e utilizar métodos básicos como addEventListener, querySelector, getElementById e getElementsByClassName, você pode criar interfaces de usuário dinâmicas que respondem a cliques, envios de formulários e muito mais.

Além disso, o evento DOMContentLoaded garante que seus scripts sejam executados somente depois que o DOM estiver totalmente carregado, evitando possíveis erros e garantindo uma interação tranquila do usuário.

Em resumo, os eventos DOM permitem que você:

• Anexe manipuladores de eventos com addEventListener para interatividade responsiva.

• Selecione elementos com querySelector ou getElementById para atualizar o conteúdo dinamicamente.

• Gerencie ações acionadas por eventos com base na entrada do usuário, como envios de formulários.

• Garanta que seus scripts sejam executados no momento certo usando DOMContentLoaded.

Com essas técnicas, você pode transformar páginas da web estáticas em experiências interativas que melhoram o envolvimento do usuário.