EVENTOS
4.1. MODELOS DE EVENTOS
Tipos de eventos comunes
Algunos de los eventos más comunes incluyen:
Eventos del mouse: click, dblclick, mousemove, mouseenter, mouseleave.
Eventos de teclado: keydown, keyup, keypress.
Eventos de formulario: submit, change, input.
Eventos de ventana: load, resize, scroll.
El modelo de eventos
El modelo de eventos en JavaScript se compone de tres
fases: captura, objetivo y propagación. A través de estas fases, podemos controlar
cómo y cuándo se gestionan los eventos en una jerarquía de elementos del DOM.
Captura: el evento se propaga desde la raíz del documento hasta el elemento
objetivo.
Objetivo: en este momento el evento llega al elemento objetivo.
Propagación: el evento se propaga de vuelta desde el elemento objetivo
hasta la raíz.
Este comportamiento se conoce como propagación de eventos o event bubbling. Por
defecto, JavaScript sigue un modelo de burbujeo, donde el evento se propaga hacia
arriba en el DOM.
Sintaxis: addEventListener
Para manejar eventos en JavaScript moderno (ECMAScript 6 en adelante), podemos
emplear el método addEventListener. Este método nos permite agregar un manejador de
eventos a cualquier elemento del DOM y tiene la siguiente estructura:
elemento.addEventListener(evento, manejador, usoCaptura);
evento: el nombre del evento (como click o keydown).
manejador: la función que se ejecutará cuando ocurra el evento.
usoCaptura (opcional): es un booleano que indica si el evento debe
capturarse antes de llegar al objetivo. Por defecto es false (fase de burbujeo).
EJEMPLO MAS CLARO:
1. Evento de Clic
document.getElementById('miBoton').addEventListener('click', function() {
alert('¡Botón clickeado!');
});
Este código agrega un evento de clic a un botón con el ID miBoton . Cuando el botón es
clickeado, se muestra una alerta.
2. Evento de Teclado
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('Se presionó la tecla Enter');
});
Este código escucha el evento de presionar una tecla en todo el documento. Si la tecla
presionada es 'Enter', se registra un mensaje en la consola.
3. Evento de Cambio en un Input
document.getElementById('miInput').addEventListener('change', function() {
console.log('El valor del input ha cambiado a: ' + this.value);
});
Este código agrega un evento de cambio a un campo de entrada con el ID miInput .
Cuando el valor del campo cambia, se registra el nuevo valor en la consola.
4.2. MODELOS BASICOS DE EVENTOS
1. Evento “ click ”
Este evento se dispara cuando el usuario hace clic en un elemento.
document.getElementById("miBoton").addEventListener("click", function() {
alert("¡Has hecho clic en el botón!");
});
2. Evento “mouseover”
Este evento se dispara cuando el usuario pasa el cursor sobre un elemento.
document.getElementById("miElemento").addEventListener("mouseover", function() {
this.style.backgroundColor = "yellow";
});
3. Evento “keydown”
Este evento se dispara cuando el usuario presiona una tecla.
document.addEventListener("keydown", function(event) {
console.log("Tecla presionada: " + event.key);
});
4. Evento “submit”
Este evento se dispara cuando se envía un formulario.
document.getElementById("miFormulario").addEventListener("submit",
function(event) {
event.preventDefault( ); // Evita el envío del formulario
alert("Formulario enviado");
});
5. Evento “change”
Este evento se dispara cuando el valor de un elemento de entrada cambia.
document.getElementById("miInput").addEventListener("change", function( ) {
console.log("Nuevo valor: " + this.value);
});
Son solo algunos ejemplos básicos, pero hay muchos más eventos que puedes explorar
y utilizar en JavaScript.
4.3. OBTENIENDO INFORMACION DEL EVENTO
Los eventos en JavaScript son acciones o sucesos que ocurren en el navegador, como un
clic del ratón, el envío de un formulario, o la carga de una página. JavaScript puede
"escuchar" estos eventos y ejecutar código en respuesta a ellos.
Ejemplo básico de un evento de clic:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Evento</title>
</head>
<body>
<button id="miBoton">Haz clic aquí</button>
<script>
// Seleccionamos el botón
const boton = document.getElementById('miBoton');
// Añadimos un listener para el evento de clic
boton.addEventListener('click', function() {
alert('¡Has hecho clic en el botón!');
});
</script>
</body>
</html>
En este ejemplo:
1. Seleccionamos el elemento: Usamos document.getElementById para
seleccionar el botón con el id miBoton .
2. Añadimos un listener: Utilizamos addEventListener para escuchar el evento de
clic ( click ) en el botón.
3. Definimos la función de respuesta: Cuando se hace clic en el botón, se ejecuta
la función que muestra una alerta.
Tipos Comunes de Eventos
click: Ocurre cuando se hace clic en un elemento.
mouseover: Ocurre cuando el puntero del ratón se mueve sobre un elemento.
mouseout: Ocurre cuando el puntero del ratón se mueve fuera de un elemento.
keydown: Ocurre cuando se presiona una tecla.
submit: Ocurre cuando se envía un formulario.
Manejo de Eventos
Puedes manejar eventos de diferentes maneras:
1. Inline HTML: Definiendo el evento directamente en el HTML (no
recomendado por razones de mantenimiento y separación de responsabilidades).
2. Propiedades del DOM: Asignando una función a una propiedad de evento del
elemento.
3. addEventListener: Método más flexible y recomendado para añadir múltiples
listeners y mantener el código organizado.
