Tema 11 IISSI 2 BP

¿Qué son los eventos en el contexto de las páginas web?. Errores de JavaScript que detienen la ejecución. "Cosas" que les ocurren a los elementos HTML. Funciones especiales definidas únicamente en el objeto window. Acciones que pueden afectar a un único elemento, a un conjunto de ellos o a la página entera. Únicamente interacciones del usuario con el ratón.

¿Cuáles de las siguientes son categorías de eventos mencionadas en el documento?. Eventos del objeto window (ej: redimensionar la ventana). Eventos del objeto document (ej: carga de la página). Eventos de Objetos del árbol DOM (ej: interacciones o modificaciones de los elementos). Eventos de Objetos XMLHttpRequest. Eventos exclusivos del servidor.

¿Cómo se puede manejar un evento en JavaScript según el documento?. Añadiendo un manejador al elemento como un atributo HTML. Manipulando el DOM para añadir el manejador al elemento (asignando una función a la propiedad on<evento> del objeto). Añadiendo un event listener mediante addEventListener(). Únicamente mediante la directiva //@handleEvent en comentarios. Creando un archivo CSS específico para eventos.

Al definir un event handler como un atributo en HTML, ¿qué es lo habitual si el código JavaScript es largo?. Dividir el código en múltiples atributos. Encapsularlo en una función y llamarla desde el manejador. Escribirlo directamente, sin importar la longitud. Utilizar una etiqueta <script> dentro del atributo. Almacenarlo en un localStorage y referenciarlo.

¿Qué sucede si se asigna una función directamente a la propiedad on<evento> de un objeto DOM (ej. btn.onclick = miFuncion;)?. Se debe usar el nombre del evento sin el prefijo on (ej. btn.click). Se usa el nombre del tipo de evento con el prefijo 'on' (onclick, onmouseover, ...). La función miFuncion recibe automáticamente dos parámetros: el evento y el elemento. Solo funciona si miFuncion está definida globalmente. Este método está obsoleto y no se recomienda.

Al usar element.addEventListener(evento, funcion);, ¿cómo se especifica el nombre del evento?. Se usa el nombre del tipo de evento sin 'on' (click, mouseover, ...). Se usa el nombre del tipo de evento con el prefijo 'on' (onclick, onmouseover, ...). Debe ir en mayúsculas (CLICK, MOUSEOVER). Es indiferente si se usa 'on' o no. Se debe pasar como un objeto con una propiedad type.

¿Cuál es una diferencia clave entre registrar múltiples event handlers (asignando a on<evento>) y múltiples event listeners (addEventListener) para el mismo evento en un elemento?. Si se añaden varios handlers (a on<evento>), sólo se ejecutará el último (se sobrescriben). Si se añaden varios listeners (addEventListener), todos ellos se ejecutarán cuando se produzca el evento. Los handlers se ejecutan antes que los listeners siempre. Los listeners sobrescriben a los handlers previos. No se pueden añadir múltiples listeners para el mismo tipo de evento.

¿Qué son los modos de propagación de eventos "capturing" y "bubbling"?. "Capturing" es para eventos de teclado y "bubbling" para eventos de ratón. "Capturing": El orden de ejecución es del elemento más externo al más interno. "Bubbling": El orden de ejecución es del elemento más interno al más externo. "Capturing" solo ocurre si se usa addEventListener con tres argumentos. "Bubbling" es el modo por defecto y no se puede cambiar.

En el ejemplo btn.addEventListener('click', cambiarColor, false);, ¿qué indica el tercer parámetro false?. Indica si el código se debe ejecutar en la fase de captura o de bubbling (false generalmente implica bubbling). Indica que el evento no debe propagarse más allá de este elemento. Determina si la función cambiarColor se ejecutará de forma asíncrona. Especifica que el listener solo se activará una vez. Es un parámetro obsoleto sin efecto actual.

¿Qué método se utiliza para eliminar un event listener previamente añadido con addEventListener?. element.deleteEventListener("evento", funcion). element.removeEventListener("evento", funcion). element.clearEventListener("evento"). element.detachEventListener("evento", funcion). Asignando null a la propiedad on<evento>.

¿Para qué se suelen usar los eventos load y unload asociados al elemento <body>?. load se dispara cuando la página se ha cargado completamente (incluyendo estilos, scripts, etc.). unload se dispara cuando el usuario sale de la página. Se pueden usar para comprobar la versión del navegador o gestionar cookies. load se usa para cargar dinámicamente elementos en el DOM. unload sirve para guardar el estado actual del DOM en el servidor.

¿Cuándo se dispara el evento change comúnmente asociado a campos de formulario?. Cada vez que se presiona una tecla dentro del campo. Cuando el campo recibe el foco. Cuando el campo pierde el foco después de que su valor ha sido modificado (implícito en el ejemplo de upperCase() donde el evento se dispara al quitar el cursor del campo). Solo cuando se envía el formulario. Únicamente para elementos <select>.

¿Cuáles de los siguientes son eventos de ratón?. mouseover: cuando el ratón está pasando por encima del elemento. mouseout: cuando el ratón deja de pasar por encima del elemento. mousedown: Cuando se pulsa el botón del ratón sobre el elemento. click: cuando se completa la pulsación (mousedown + mouseup). mousedrag: cuando se arrastra el ratón con el botón presionado.

¿Para qué se suelen emplear los eventos focus y blur?. focus se produce cuando el elemento adquiere el foco. blur se produce cuando el elemento pierde el foco. Se suelen emplear para aplicar algún tipo de procesado sobre los campos de los formularios conforme el usuario los va completando. Para detectar si el navegador está en primer o segundo plano. Exclusivamente para elementos <a> y <button>.

¿Qué propiedad tienen todos los objetos Event que devuelve una referencia al elemento HTML que provocó el evento?. sourceElement. target. originator. htmlElement. currentTarget (aunque currentTarget existe, target es la respuesta más directa a "elemento que provocó el evento" en muchos contextos).

¿Por qué es importante validar los formularios en el lado del cliente?. Permite mostrar al usuario mensajes de error intuitivos antes de enviar el formulario al backend. Se puede cancelar el envío del formulario para ahorrar al backend procesar formularios inválidos. Elimina la necesidad de validación en el backend. Podemos decidir enviar el formulario de cualquier otra manera en lugar de la que ofrece por defecto el navegador (por ejemplo, mediante AJAX). Garantiza la seguridad total de los datos enviados.

¿Qué sucede si el manejador del evento submit de un formulario devuelve false?. El envío del formulario se cancela. El formulario se envía, pero sin los datos. Se muestra un mensaje de error por defecto del navegador. La página se recarga inmediatamente. Se intenta enviar el formulario por AJAX automáticamente.

¿Para qué sirve el objeto FormData en el contexto de formularios?. Para facilitar la consulta de los datos de un formulario. Los campos se referencian por su atributo name, no por su id. Modifica directamente los valores visibles en los campos del formulario. Permite añadir, eliminar y modificar más fácilmente los valores que se enviarán al servidor. Es un objeto que solo contiene información sobre la estructura del formulario, no sus datos.

¿Cuáles son métodos del objeto FormData?. formData.append("name", "value"). formData.get("name"). formData.has("name"). formData.delete("name"). formData.validate().

¿Qué ventaja principal ofrecen los módulos validadores al trabajar con FormData?. Hacen que la validación en el lado del cliente sea innecesaria en el backend. Simplifican el código asociado a la gestión de eventos de la página. Permiten la combinación mediante composición de validadores. Ejecutan la validación mucho más rápido que el acceso manual a los campos. Permiten validar formularios incluso si JavaScript está desactivado.