Contenido verificado asociado a este RA
Fundamentos de Eventos en la Web: HTML y JavaScript
Esta unidad introduce el concepto de eventos en el desarrollo web interactivo, explicando cómo el lenguaje de marcas (HTML) prepara los elementos para la interacción y cómo JavaScript se encarga de la gestión de estos eventos. Se diferencian los tipos de eventos más comunes y su propósito.
Características del Lenguaje JavaScript para la Gestión de Eventos
Esta unidad estudia las características que ofrece JavaScript para gestionar eventos: el método addEventListener(), el objeto Event y sus propiedades, las fases de propagación (captura y burbujeo) y la técnica de delegación de eventos. Se complementa con una clasificación de los principales tipos de eventos manejables y con ejemplos prácticos de creación de código que captura y utiliza eventos, incluyendo el control del comportamiento por defecto del navegador.
Gestión y Validación de Formularios Web con Eventos y Expresiones Regulares
Esta unidad se centra en la aplicación de eventos para la gestión y validación de formularios web, reconociendo las capacidades de JavaScript para interactuar con los elementos de formulario y utilizando expresiones regulares para validaciones complejas.
Pruebas y Documentación de Código Interactivo
Esta unidad aborda la importancia de probar y documentar el código JavaScript que maneja eventos, asegurando su correcto funcionamiento y facilitando su mantenimiento y colaboración en equipos de desarrollo.
Conceptos clave
EventoManejador de eventos (Event Handler)DOM (Document Object Model)addEventListener()Objeto EventTipos de eventos (ratón, teclado, formulario, documento)event.target vs event.currentTargetevent.preventDefault()event.stopPropagation()Fases de propagación: captura y burbujeoDelegación de eventosTipos de eventos: ratón, teclado, formulario, ventana/cargaFormularios HTMLElementos de formulario (input, select, textarea)Propiedades de elementos de formulario (value, checked)Eventos de formulario (submit, blur, input, change)Validación de formulariosExpresiones regulares (RegEx)
Errores que conviene evitar
- Mezclar HTML y JavaScript con atributos `onEVENT`: Causa: Facilidad aparente para ejemplos simples. Corrección: Usar `addEventListener` en JavaScript para separar responsabilidades y mejorar la mantenibilidad.
- Confundir `keydown` y `keypress`: Causa: No entender la diferencia entre la pulsación física de una tecla y la generación de un carácter. Corrección: Usar `keydown` para detectar cualquier tecla y `keypress` (o `input`) para caracteres imprimibles.
- No usar `event.preventDefault()` en eventos de formulario o enlaces: Causa: desconocimiento del comportamiento por defecto del navegador. Corrección: llamar a `event.preventDefault()` al inicio del manejador cuando se desea sustituir la acción nativa.
- Adjuntar manejadores a muchos elementos individuales en lugar de delegar: Causa: enfoque ingenuo o desconocimiento de la propagación por burbujeo. Corrección: adjuntar un único manejador al elemento padre y usar `event.target` para identificar el elemento concreto.
- Confundir `event.target` con `event.currentTarget`: Causa: no distinguir entre el elemento donde se originó el evento y aquel al que está adjunto el manejador. Corrección: usar `currentTarget` cuando se necesite referenciar siempre el elemento con el listener, y `target` cuando se necesite el elemento real que disparó el evento.
- Usar atributos HTML inline (`onclick="..."`) en proyectos de cierta envergadura: Causa: desconocimiento de las ventajas de `addEventListener()`. Corrección: separar comportamiento (JS) de estructura (HTML) usando siempre `addEventListener()` desde el script.
- No validar todos los campos necesarios o no cubrir todos los casos de error: Causa: Pruebas insuficientes o requisitos de validación incompletos. Corrección: Crear una lista exhaustiva de reglas de validación y probar cada una con datos válidos e inválidos.
- Usar expresiones regulares excesivamente complejas para validaciones simples: Causa: Sobrecualificación o falta de criterio. Corrección: Evaluar si una RegEx es realmente necesaria o si una comprobación de cadena básica es más legible y eficiente.