O que é o modelo de eventos no navegador?

Método de gestão de interações do utilizador (cliques, entrada, passagem do rato) e eventos do sistema (carregamento de página, erros) no navegador web.

Conceitos principais:

• Evento: Ação que ocorreu.
• Manejador de evento: Função que é executada quando o evento ocorre.
• Objeto de evento (Event object): Passado ao manejador e contém informações sobre o evento (tipo, elemento, coordenadas, etc.).

Fluxo padrão de eventos:

1. Captura (Fase de captura): O evento desce do elemento superior do DOM (Window, Document) até ao elemento alvo. Os manejadores nesta fase ativam-se primeiro.
2. Fase de destino (Target phase): O evento chega ao elemento alvo onde ocorreu.
3. Bubbling (Fase de propagação): O evento sobe do elemento alvo através do DOM até ao Window. Os manejadores nesta fase ativam-se após a captura e a fase de destino.

Adicionar manejadores:

• Atributos HTML (onclick, onload): Método obsoleto, não recomendado para aplicações complexas.
• Propriedades de elementos DOM (element.onclick): Pode atribuir apenas um manejador por tipo de evento por elemento.

  // Exemplo
  const button = document.querySelector('button');
  button.onclick = function() {
      alert('Botão pressionado!');
  };
  

• Método addEventListener: Método preferido. Permite adicionar múltiplos manejadores para um mesmo evento e controlar a fase de tratamento (captura ou propagação).

  // Exemplo
  const button = document.querySelector('button');
  button.addEventListener('click', function(event) {
      console.log('Clique no botão!', event);
  }, false); // false - propagação, true - captura
  

O método removeEventListener é usado para remover manejadores.

Delegação de eventos: Anexar um manejador a um elemento pai para tratar eventos de elementos filhos. Economiza recursos e simplifica o trabalho com conteúdo dinâmico.

// Exemplo de delegação
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clique no elemento da lista:', event.target.textContent);
    }
});