Tutorial JavaScript: Eventos del DOM

El Modelo de Objetos del Documento (DOM, por sus siglas en inglés) es una representación programática de un documento web, que permite a los desarrolladores de JavaScript interactuar y manipular el contenido, la estructura y el estilo de un sitio web.

Un evento del DOM es una señal que indica que algo específico ha ocurrido en el documento. Esto puede ser algo que el usuario hace (como hacer click con el ratón, presionar una tecla, o mover el ratón), o puede ser algo que el navegador hace (como completar la carga de la página, o empezar a reproducir un video).

Los eventos son una parte fundamental de la interacción con las páginas web en JavaScript. Permiten que los desarrolladores de JavaScript hagan que las páginas web sean interactivas y respondan a las acciones del usuario.

Escuchadores de eventos

Un patrón común en JavaScript es el uso de "escuchadores de eventos" (event listeners), que son funciones que se "escuchan" o "esperan" un tipo específico de evento y luego se ejecutan cuando ese evento ocurre.

Por ejemplo, podría utilizarse un escuchador de eventos para hacer que algo suceda cuando un usuario hace click en un botón:

// Primero, se obtiene una referencia al elemento del botón
var boton = document.getElementById('miBoton');

// Luego, se añade un escuchador de eventos al botón
boton.addEventListener('click', function() {
  // Dentro de esta función, se especifica que debe suceder al hacer click en el botón
  alert('¡Has hecho click en el botón!');
});

En este ejemplo, el escuchador de eventos está "escuchando" el evento 'click'. Cuando el usuario hace click en el botón, el escuchador de eventos se activa y ejecuta la función que se le ha proporcionado. En este caso, la función simplemente muestra una alerta que dice '¡Has hecho click en el botón!'.

Es importante mencionar que los eventos no están limitados a las interacciones del usuario. Por ejemplo, el evento 'load' se dispara cuando el navegador ha terminado de cargar una página o una imagen. Aquí se muestra un ejemplo de cómo se puede usar este evento:

// Se añade un escuchador de eventos al objeto window para el evento 'load'
window.addEventListener('load', function() {
  // Esta función se ejecutará cuando la página haya terminado de cargar
  console.log('La página ha terminado de cargar.');
});

En este ejemplo, el escuchador de eventos se está añadiendo al objeto window, que representa la ventana del navegador. Cuando el navegador ha terminado de cargar la página, se activa el evento 'load' y se ejecuta la función proporcionada, que en este caso simplemente imprime un mensaje en la consola.

Eventos del DOM

Aquí hay una lista de algunos de los eventos del DOM más comúnmente utilizados en JavaScript:

1. click: Se dispara cuando un usuario hace click en un elemento.

document.getElementById("miBoton").addEventListener("click", function() {
  console.log("¡Has hecho click en el botón!");
});

2. dblclick: Se dispara cuando un usuario hace doble click en un elemento.

document.getElementById("miBoton").addEventListener("dblclick", function() {
  console.log("¡Has hecho doble click en el botón!");
});

3. mouseenter: Se dispara cuando el cursor del ratón entra en un elemento.

document.getElementById("miDiv").addEventListener("mouseenter", function() {
  console.log("¡El ratón ha entrado en el div!");
});

4. mouseleave: Se dispara cuando el cursor del ratón sale de un elemento.

document.getElementById("miDiv").addEventListener("mouseleave", function() {
  console.log("¡El ratón ha salido del div!");
});

5. keydown: Se dispara cuando el usuario presiona una tecla.

window.addEventListener("keydown", function(event) {
  console.log("¡Has presionado la tecla: " + event.key + "!");
});

6. keyup: Se dispara cuando el usuario suelta una tecla.

window.addEventListener("keyup", function(event) {
  console.log("¡Has soltado la tecla: " + event.key + "!");
});

7. load: Se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.

window.addEventListener("load", function() {
  console.log("¡La página ha terminado de cargar!");
});

8. submit: Se dispara cuando un formulario es enviado.

document.getElementById("miFormulario").addEventListener("submit", function(event) {
  event.preventDefault(); // Evita la acción por defecto del navegador
  console.log("¡El formulario ha sido enviado!");
});

9. change: Se dispara cuando el valor de un elemento de entrada de formulario cambia.

document.getElementById("miInput").addEventListener("change", function() {
  console.log("¡El valor del input ha cambiado a: " + this.value + "!");
});

Estos son sólo algunos ejemplos de los muchos eventos que los desarrolladores de JavaScript pueden utilizar para interactuar con el DOM y crear páginas web interactivas.

Argumentos de addEventListener

La función addEventListener toma dos argumentos:

1. El nombre del evento que se quiere escuchar (por ejemplo, 'click', 'load', 'keyup', etc.).
2. Una función de callback que se ejecutará cuando se dispare el evento.

Una función de callback es una función que se pasa como argumento a otra función (en este caso, addEventListener) y que se "llama de vuelta" en algún momento. En el contexto de los eventos del DOM, la función de callback se llama cada vez que se dispara el evento especificado.

La función de callback puede ser cualquier función que se defina, y puede contener cualquier código que se desee ejecutar en respuesta al evento.

function miFuncionDeCallback() {
  console.log('¡Se ha hecho click en el botón!');
}

document.getElementById('miBoton').addEventListener('click', miFuncionDeCallback);

En este ejemplo, miFuncionDeCallback es una función que se define por separado y luego se pasa como argumento a addEventListener. Cada vez que se hace clic en el botón, se llama a miFuncionDeCallback, y se imprime un mensaje en la consola.

Además, la función de callback puede recibir opcionalmente un objeto de evento como su primer argumento. Este objeto contiene información sobre el evento, como el elemento que disparó el evento, el tipo de evento, la hora del evento, y cualquier detalle específico del evento (por ejemplo, la tecla que se presionó para un evento de teclado, o las coordenadas del clic para un evento de clic). Aquí hay un ejemplo de cómo se puede utilizar este objeto de evento:

function miFuncionDeCallback(evento) {
  console.log('¡El botón ha sido clickeado!');
  console.log('El evento fue de tipo: ' + evento.type);
  console.log('El evento fue disparado por el elemento: ' + evento.target.id);
}

document.getElementById('miBoton').addEventListener('click', miFuncionDeCallback);

En este ejemplo, miFuncionDeCallback toma un argumento evento, que es el objeto de evento. Dentro de la función, se imprime información adicional sobre el evento, incluyendo el tipo de evento y el id del elemento que lo disparó.

A través de los eventos del DOM, los desarrolladores de JavaScript pueden crear experiencias de usuario interactivas y dinámicas en sus páginas web.