Introducción a JavaScript y Eventos en el DOM

JavaScript es un lenguaje de programación ampliamente utilizado para crear interactividad en páginas web. Una de las características clave de JavaScript es su capacidad para responder a eventos en el Document Object Model (DOM). En este capítulo, aprenderemos cómo asociar eventos a elementos del DOM y cómo manipular el DOM de manera interactiva.

El Modelo de Eventos en JavaScript

En JavaScript, los eventos son acciones que ocurren en una página web, como hacer clic en un botón, mover el mouse o presionar una tecla. El Modelo de Eventos de JavaScript permite a los desarrolladores responder a estas acciones y crear aplicaciones web interactivas.

Asociar Eventos a Elementos del DOM

Para asociar eventos a elementos del DOM, podemos utilizar métodos y atributos específicos. Algunos de los eventos más comunes incluyen:

1. click

Este evento se desencadena cuando se hace clic en un elemento.

elemento.addEventListener('click', function() {
  // Código a ejecutar cuando se hace clic en el elemento
});

2. mouseover y mouseout

Estos eventos se desencadenan cuando el mouse entra y sale de un elemento, respectivamente.

elemento.addEventListener('mouseover', function() {
  // Código a ejecutar cuando el mouse entra en el elemento
});

elemento.addEventListener('mouseout', function() {
  // Código a ejecutar cuando el mouse sale del elemento
});

3. input

Este evento se desencadena cuando se ingresa texto en un campo de entrada (input) o se modifica su contenido.

elemento.addEventListener('input', function() {
  // Código a ejecutar cuando se ingresa texto en el elemento
});

4. keydown

Este evento se desencadena cuando se presiona una tecla en el teclado.

elemento.addEventListener('keydown', function(event) {
  // Código a ejecutar cuando se presiona una tecla
});

Manipulación Interactiva del DOM

Una vez que hemos asociado eventos a elementos del DOM, podemos realizar manipulaciones interactivas en respuesta a esos eventos. Algunas de las acciones comunes incluyen:

1. Cambiar el Contenido de un Elemento

Podemos cambiar el contenido de un elemento en respuesta a un evento.

elemento.addEventListener('click', function() {
  elemento.textContent = 'Nuevo contenido';
});

2. Ocultar o Mostrar Elementos

Podemos ocultar o mostrar elementos según las interacciones del usuario.

elemento.addEventListener('click', function() {
  elemento.style.display = 'none'; // Oculta el elemento
});

3. Agregar o Eliminar Clases

Podemos agregar o eliminar clases CSS para cambiar el estilo de un elemento.

elemento.addEventListener('mouseover', function() {
  elemento.classList.add('resaltado'); // Agrega una clase CSS
});

elemento.addEventListener('mouseout', function() {
  elemento.classList.remove('resaltado'); // Elimina una clase CSS
});

Ejercicio 1: Asociación de Eventos

Crea un botón con el texto «Haz clic aquí». Asocia un evento de clic a este botón de manera que, al hacer clic en él, se muestre una alerta con el mensaje «¡Botón clickeado!».

<button id="miBoton">Haz clic aquí</button>

<script>
  let boton = document.getElementById('miBoton');

  boton.addEventListener('click', function() {
    alert('¡Botón clickeado!');
  });
</script>

Ejercicio 2: Manipulación Interactiva

Crea un campo de entrada (input) y un párrafo. Asocia un evento de input al campo de entrada de modo que, al ingresar texto, se actualice el contenido del párrafo con el texto ingresado.

<input id="miInput" type="text">
<p id="miParrafo"></p>

<script>
  let input = document.getElementById('miInput');
  let parrafo = document.getElementById('miParrafo');

  input.addEventListener('input', function() {
    parrafo.textContent = input.value;
  });
</script>

Conclusión

En este capítulo, hemos explorado cómo asociar eventos a elementos del DOM y cómo realizar manipulaciones interactivas en respuesta a esos eventos utilizando JavaScript. Estas habilidades son fundamentales para crear aplicaciones web dinámicas y atractivas.