El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Manejo de Eventos

Siguiente ►
►

El manejo de eventos es una parte fundamental del desarrollo web interactivo. Los eventos permiten que JavaScript responda a las acciones del usuario, como hacer clic en un botón, mover el ratón, presionar una tecla, entre otros. En esta sección, aprenderás cómo trabajar con eventos en JavaScript.

Conceptos Clave

  1. Eventos: Son acciones o sucesos que ocurren en el navegador, como un clic del ratón, una pulsación de tecla, o la carga de una página.
  2. Manejadores de Eventos: Son funciones que se ejecutan en respuesta a un evento.
  3. Propagación de Eventos: Es el proceso por el cual un evento se mueve a través del DOM. Puede ser en fase de burbujeo (del elemento hijo al padre) o en fase de captura (del elemento padre al hijo).

Añadiendo Manejadores de Eventos

Método addEventListener

La forma más común y recomendada de añadir manejadores de eventos es utilizando el método addEventListener. Este método permite añadir múltiples manejadores de eventos al mismo elemento sin sobrescribir los existentes.

// Selecciona el elemento
const button = document.querySelector('button');

// Define el manejador de eventos
function handleClick() {
  alert('¡Botón clickeado!');
}

// Añade el manejador de eventos al botón
button.addEventListener('click', handleClick);

Propiedades de Eventos

Otra forma de añadir manejadores de eventos es asignando una función a una propiedad de evento del elemento. Sin embargo, esta forma sobrescribe cualquier manejador de eventos existente para ese tipo de evento.

// Selecciona el elemento
const button = document.querySelector('button');

// Añade el manejador de eventos al botón
button.onclick = function() {
  alert('¡Botón clickeado!');
};

Tipos Comunes de Eventos

Eventos de Ratón

  • click: Se dispara cuando se hace clic en un elemento.
  • dblclick: Se dispara cuando se hace doble clic en un elemento.
  • mouseover: Se dispara cuando el puntero del ratón se mueve sobre un elemento.
  • mouseout: Se dispara cuando el puntero del ratón se mueve fuera de un elemento.

Eventos de Teclado

  • keydown: Se dispara cuando se presiona una tecla.
  • keyup: Se dispara cuando se suelta una tecla.
  • keypress: Se dispara cuando se presiona una tecla que produce un carácter.

Eventos de Formulario

  • submit: Se dispara cuando se envía un formulario.
  • change: Se dispara cuando el valor de un elemento de formulario cambia.
  • input: Se dispara cuando el valor de un elemento de entrada cambia.

Ejemplo Práctico

Vamos a crear un ejemplo práctico donde manejamos varios eventos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manejo de Eventos</title>
</head>
<body>
  <button id="myButton">Haz clic aquí</button>
  <input type="text" id="myInput" placeholder="Escribe algo...">
  <script>
    // Selecciona los elementos
    const button = document.getElementById('myButton');
    const input = document.getElementById('myInput');

    // Manejador de eventos para el botón
    button.addEventListener('click', function() {
      alert('¡Botón clickeado!');
    });

    // Manejador de eventos para el campo de texto
    input.addEventListener('input', function(event) {
      console.log('Valor del input:', event.target.value);
    });

    // Manejador de eventos para la tecla Enter en el campo de texto
    input.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        alert('¡Enter presionado!');
      }
    });
  </script>
</body>
</html>

Ejercicio Práctico

Ejercicio 1: Contador de Clics

Crea una página web con un botón que cuente cuántas veces ha sido clickeado y muestre el conteo en la página.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contador de Clics</title>
</head>
<body>
  <button id="clickButton">Haz clic aquí</button>
  <p>Has clickeado el botón <span id="clickCount">0</span> veces.</p>
  <script>
    // Selecciona los elementos
    const button = document.getElementById('clickButton');
    const clickCount = document.getElementById('clickCount');
    let count = 0;

    // Manejador de eventos para el botón
    button.addEventListener('click', function() {
      count++;
      clickCount.textContent = count;
    });
  </script>
</body>
</html>

Ejercicio 2: Validación de Formulario

Crea un formulario con un campo de texto y un botón de envío. Valida que el campo de texto no esté vacío antes de permitir el envío del formulario.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Validación de Formulario</title>
</head>
<body>
  <form id="myForm">
    <input type="text" id="textInput" placeholder="Escribe algo...">
    <button type="submit">Enviar</button>
  </form>
  <p id="errorMessage" style="color: red;"></p>
  <script>
    // Selecciona los elementos
    const form = document.getElementById('myForm');
    const textInput = document.getElementById('textInput');
    const errorMessage = document.getElementById('errorMessage');

    // Manejador de eventos para el envío del formulario
    form.addEventListener('submit', function(event) {
      if (textInput.value.trim() === '') {
        event.preventDefault();
        errorMessage.textContent = 'El campo de texto no puede estar vacío.';
      } else {
        errorMessage.textContent = '';
      }
    });
  </script>
</body>
</html>

Resumen

En esta sección, hemos aprendido cómo manejar eventos en JavaScript utilizando el método addEventListener y propiedades de eventos. También hemos explorado diferentes tipos de eventos y cómo utilizarlos en ejemplos prácticos. Los ejercicios proporcionados te ayudarán a reforzar estos conceptos y a aplicarlos en situaciones del mundo real.

En la siguiente sección, profundizaremos en la creación y eliminación de elementos del DOM, lo que te permitirá manipular la estructura de tu página web de manera dinámica.

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados