Eventos en JavaScript

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

¿Cuál de las siguientes opciones describe mejor el propósito de addEventListener en JavaScript?

  • Define el estilo visual de un elemento HTML cuando ocurre un evento.
  • Asigna un evento específico a un elemento del DOM, ejecutando una función cuando se detecta dicho evento. (correct)
  • Elimina un evento previamente asignado a un elemento del DOM.
  • Crea un nuevo elemento HTML y lo añade al DOM en respuesta a un evento.

En el contexto de addEventListener, ¿qué representa el tercer parámetro booleano?

  • Especifica si la función a ejecutar debe ser anónima o no.
  • Determina si el evento debe ser capturado durante la fase de _bubbling_ o _capturing_. (correct)
  • Define si el evento se aplica a todos los elementos del DOM.
  • Indica si el evento debe ser cancelado después de su ejecución.

Dentro de una función que se ejecuta en respuesta a un evento, ¿cómo se accede al objeto event que contiene información sobre el evento ocurrido?

  • Se pasa automáticamente como primer argumento a la función. (correct)
  • No es posible acceder al objeto `event`.
  • Se accede a través de la variable global `window.event`.
  • Se define explícitamente dentro de la función utilizando la palabra clave `event`.

¿Qué ocurriría si intentas adjuntar un evento a un elemento que no existe en el DOM?

<p>No ocurre nada, el código se ejecuta sin errores, pero el evento no se activa. (D)</p> Signup and view all the answers

Si deseas ejecutar código solo cuando el usuario presiona la tecla 'Escape', ¿qué propiedad del objeto event usarías dentro de la función que gestiona el evento keydown?

<p><code>event.code</code> (A)</p> Signup and view all the answers

¿Cuál es la principal diferencia entre los eventos mouseenter y mousemove?

<p><code>mousemove</code> se dispara continuamente mientras el ratón se mueve sobre un elemento, mientras que <code>mouseenter</code> se dispara solo una vez cuando el ratón entra en el elemento. (C)</p> Signup and view all the answers

En una aplicación web, ¿cuál es el uso más común del evento scroll?

<p>Monitorizar la posición de desplazamiento para implementar funcionalidades como la carga infinita o la fijación de elementos en la pantalla. (C)</p> Signup and view all the answers

¿Qué tipo de problemas podría causar el uso excesivo de addEventListener en una página web compleja?

<p>Puede llevar a un consumo excesivo de memoria y degradación del rendimiento, especialmente si no se gestionan correctamente las referencias a las funciones de <em>callback</em>. (C)</p> Signup and view all the answers

¿Cuál de los siguientes eventos es más adecuado para validar la información introducida por un usuario en un campo de formulario antes de que se envíe el formulario?

<p><code>blur</code> (C)</p> Signup and view all the answers

Estás desarrollando una animación en CSS. ¿Qué eventos JavaScript serían útiles para sincronizar acciones en tu código cuando la animación comienza y termina?

<p><code>animationstart</code> y <code>animationend</code> (C)</p> Signup and view all the answers

Flashcards

Eventos

Acciones producidas por la interacción del usuario con la página, como clicks, scroll, y pulsación de teclas.

addEventListener

Función de los objetos del DOM que permite detectar eventos y ejecutar una función.

click

Evento que ocurre al hacer clic izquierdo con el ratón.

scroll

Evento que se activa al mover la barra de desplazamiento de una página.

Signup and view all the flashcards

keydown

Evento que ocurre al pulsar una tecla del teclado.

Signup and view all the flashcards

submit

Evento que se activa al enviar un formulario.

Signup and view all the flashcards

load

Evento que indica que la página ha terminado de cargarse completamente.

Signup and view all the flashcards

focus

Evento que ocurre cuando un elemento input recibe el foco.

Signup and view all the flashcards

blur

Evento que ocurre cuando un elemento input pierde el foco.

Signup and view all the flashcards

evento.code

Acceder a las propiedades del evento que se dispara, como la tecla presionada.

Signup and view all the flashcards

Study Notes

  • Cualquier actividad generada por un usuario se define como Eventos.
  • Los eventos incluyen pulsar una tecla, mover el ratón, hacer scroll, o pulsar un botón.
  • Cada evento se puede escuchar en JavaScript para lanzar acciones o extraer información.

Eventos Comunes

  • click: Se produce al hacer clic izquierdo con el ratón.
  • scroll: Se produce al mover la barra de desplazamiento.
  • keydown: Se produce al pulsar una tecla del teclado.
  • submit: Se produce al enviar un formulario.
  • load: Se produce cuando la página ha terminado de cargar.
  • focus: Se produce cuando un input recibe el foco.
  • blur: Se produce cuando un input pierde el foco.
  • animationstart: Se produce al inicio de una animación.
  • animationend: Se produce al finalizar una animación.
  • transitionstart: Se produce al inicio de una transición.
  • transitionend: Se produce al finalizar una transición.
  • contextmenu: Se produce al hacer clic derecho con el ratón.
  • mouseenter: Se produce cuando el cursor del ratón entra en un elemento.
  • mouseleave: Se produce cuando el cursor del ratón sale de un elemento.
  • mousemove: Se produce al mover el cursor del ratón.

addEventListener

  • Los eventos se aplican en addEventListener, una función que poseen todos los objetos del DOM.
  • addEventListener contiene tres parámetros de entrada.
  • Primer parámetro: el nombre del evento (ejemplo: submit).
  • Segundo parámetro: la función a ejecutar cuando se detecta el evento (puede ser anónima o una referencia).
  • Tercer parámetro: un booleano que indica si debe escuchar en todo el árbol DOM (true) o solo en la etiqueta (false).

Clic sobre botón

  • Al hacer clic sobre un botón, se puede imprimir funciono por consola.
  • Primero, se debe capturar el botón usando document.querySelector('#boton').
  • Luego, se escucha el evento click del botón y se ejecuta una función.

Apretar una tecla

  • Se puede detectar cuando se pulsa una tecla específica, como Enter, y mostrar una alerta.
  • Es importante usar la condicional evento.code === "Enter" para filtrar por la tecla deseada.
  • Para actuar sobre otra tecla, se debe buscar su código en la documentación de Mozilla.

Scroll

  • Se puede imprimir por consola la posición del scroll cada vez que se haga scroll.
  • Se utiliza window.scrollY para obtener la posición vertical actual del scroll.
  • Se escucha el evento scroll en el document.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser