Comprensión del Objeto de Evento en JavaScript
Cada vez que ocurre un evento en JavaScript, un objeto event se pasa automáticamente al manejador del evento. Este objeto contiene información importante sobre el evento, como el elemento que lo desencadenó (target), el tipo de evento (type) y métodos para controlar el comportamiento del evento, como preventDefault() y stopPropagation().
Acceso a la información relacionada con el evento
El objeto event contiene varias propiedades y métodos útiles que permiten acceder a la información del evento e interactuar con él.
target
La propiedad target se refiere al elemento que desencadenó el evento. Permite determinar qué elemento fue clicado, sobre el que se pasó el cursor o con el que se interactuó.
index.html
index.css
index.js
event.target se utiliza para identificar el botón específico que fue pulsado, y su id se muestra en el párrafo con el ID display.
type
La propiedad type proporciona el tipo de evento que ocurrió (por ejemplo, click, submit, keydown).
index.html
index.css
index.js
El event.type se muestra en el párrafo como retroalimentación, indicando que ha ocurrido un evento click. Además, cuando se hace clic en el botón, el color de fondo de todo el cuerpo se cambia a lightblue.
Método preventDefault() en el objeto Event
El método preventDefault() detiene el comportamiento predeterminado de un elemento, como evitar que un enlace navegue o impedir que un formulario se envíe.
index.html
index.css
index.js
Aquí, preventDefault() evita la acción predeterminada (navegar a una nueva página) al hacer clic en el enlace. En su lugar, se muestra una alerta.
Ejemplo práctico: gestión del envío de formularios y uso del objeto de evento
Validación de un formulario, prevención del envío si los campos están vacíos y visualización de los datos del formulario junto con información relacionada con el evento, como target, type y cómo preventDefault() evita el envío predeterminado del formulario.
index.html
index.css
index.js
Cuando se envía el formulario "Sign Up", un escuchador de eventos intercepta el envío con event.preventDefault(). Si el campo de nombre de usuario o contraseña está vacío, se muestra un mensaje de error; de lo contrario, aparece un mensaje de éxito mostrando el nombre de usuario enviado. Además, se muestran detalles sobre el evento—como el tipo, el ID del formulario y si la acción predeterminada fue prevenida—en una sección dedicada. Luego, el formulario se restablece para su uso posterior.
1. ¿Qué información proporciona la propiedad event.target?
2. ¿Por qué se podría utilizar event.preventDefault() en un evento de envío de formulario?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.22Comprensión del Objeto de Evento en JavaScript
Desliza para mostrar el menú
Cada vez que ocurre un evento en JavaScript, un objeto event se pasa automáticamente al manejador del evento. Este objeto contiene información importante sobre el evento, como el elemento que lo desencadenó (target), el tipo de evento (type) y métodos para controlar el comportamiento del evento, como preventDefault() y stopPropagation().
Acceso a la información relacionada con el evento
El objeto event contiene varias propiedades y métodos útiles que permiten acceder a la información del evento e interactuar con él.
target
La propiedad target se refiere al elemento que desencadenó el evento. Permite determinar qué elemento fue clicado, sobre el que se pasó el cursor o con el que se interactuó.
index.html
index.css
index.js
event.target se utiliza para identificar el botón específico que fue pulsado, y su id se muestra en el párrafo con el ID display.
type
La propiedad type proporciona el tipo de evento que ocurrió (por ejemplo, click, submit, keydown).
index.html
index.css
index.js
El event.type se muestra en el párrafo como retroalimentación, indicando que ha ocurrido un evento click. Además, cuando se hace clic en el botón, el color de fondo de todo el cuerpo se cambia a lightblue.
Método preventDefault() en el objeto Event
El método preventDefault() detiene el comportamiento predeterminado de un elemento, como evitar que un enlace navegue o impedir que un formulario se envíe.
index.html
index.css
index.js
Aquí, preventDefault() evita la acción predeterminada (navegar a una nueva página) al hacer clic en el enlace. En su lugar, se muestra una alerta.
Ejemplo práctico: gestión del envío de formularios y uso del objeto de evento
Validación de un formulario, prevención del envío si los campos están vacíos y visualización de los datos del formulario junto con información relacionada con el evento, como target, type y cómo preventDefault() evita el envío predeterminado del formulario.
index.html
index.css
index.js
Cuando se envía el formulario "Sign Up", un escuchador de eventos intercepta el envío con event.preventDefault(). Si el campo de nombre de usuario o contraseña está vacío, se muestra un mensaje de error; de lo contrario, aparece un mensaje de éxito mostrando el nombre de usuario enviado. Además, se muestran detalles sobre el evento—como el tipo, el ID del formulario y si la acción predeterminada fue prevenida—en una sección dedicada. Luego, el formulario se restablece para su uso posterior.
1. ¿Qué información proporciona la propiedad event.target?
2. ¿Por qué se podría utilizar event.preventDefault() en un evento de envío de formulario?
¡Gracias por tus comentarios!
