¿Qué es el modelo de eventos en el navegador…

Método de manejo de interacciones del usuario (clics, entrada, desplazamiento) y eventos del sistema (carga de página, errores) en el navegador web.

Conceptos principales:

Evento: Acción que ocurrió.
Manejador de evento: Función que se ejecuta cuando ocurre el evento.
Objeto de evento (Event object): Se pasa al manejador y contiene información sobre el evento (tipo, elemento, coordenadas, etc.).

Flujo estándar de eventos:

Captura (Fase de captura): El evento desciende desde el elemento superior del DOM (Window, Document) hasta el elemento objetivo. Los manejadores en esta fase se activan primero.
Fase de destino (Target phase): El evento llega al elemento objetivo donde ocurrió.
Bubbling (Fase de burbujeo): El evento sube desde el elemento objetivo de regreso a través del DOM hasta Window. Los manejadores en esta fase se activan después de la captura y la fase de destino.

Agregar manejadores:

Atributos HTML (onclick, onload): Método obsoleto, no recomendado para aplicaciones complejas.

Propiedades de elementos DOM (element.onclick): Se puede asignar solo un manejador por tipo de evento por elemento.

// Ejemplo
const button = document.querySelector('button');
button.onclick = function() {
    alert('¡Botón presionado!');
};

Método addEventListener: Método preferido. Permite agregar múltiples manejadores para un evento y controlar la fase de manejo (captura o burbujeo).

// Ejemplo
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
    console.log('¡Clic en el botón!', event);
}, false); // false - burbujeo, true - captura

El método removeEventListener se usa para eliminar manejadores.

Delegación de eventos: Adjuntar un manejador a un elemento padre para manejar eventos de elementos hijos. Ahorra recursos y simplifica el trabajo con contenido dinámico.

// Ejemplo de delegación
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clic en elemento de lista:', event.target.textContent);
    }
});

¿Qué es el modelo de eventos en el navegador?