GoConqr has a new look! Let us know what you think.

Sign up free

Flashcards

Ejercisiojs

ANTONIO MIKEL ORTIZ MOHEDANO Spanish 50 cards

Cards in this deck (50)

  1. 1click Descripción: Se dispara cuando se hace clic en un elemento. Categoría: Evento de clic.Ejemplo:
    element.addEventListener('click', function() {
    console.log('Elemento clicado');
    });
    explicación:
    El evento click registra una función que se ejecuta cuando se hace clic en el elemento.
  2. 2dblclick Descripción: Se dispara cuando se hace doble clic en un elemento. Categoría: Evento de clic.Ejemplo:
    element.addEventListener('dblclick', function() {
    console.log('Doble clic en el elemento');
    });
    Explicación:
    Este evento detecta cuando el usuario hace dos clics seguidos en un elemento.
  3. 3mousedown Descripción: Se activa cuando se presiona el botón del ratón. Categoría: Evento de botón del ratónEjemplo:
    element.addEventListener('mousedown', function() {
    console.log('Botón del ratón presionado');
    });
    Explicacion:
    La función se ejecuta cuando el botón del ratón es presionado sobre el elemento.
  4. 4mouseup Descripción: Se activa cuando se libera el botón del ratón. Categoría: Evento de botón del ratón.Ejemplo:
    element.addEventListener('mouseup', function() {
    console.log('Botón del ratón liberado');
    });
    Explicacion:
    La función se dispara cuando el botón del ratón es soltado sobre el elemento.
  5. 5mouseover Descripción: Se activa cuando el ratón pasa sobre un elemento. Categoría: Evento de desplazamiento del ratón.Ejemplo:
    element.addEventListener('mouseover', function() {
    console.log('Ratón sobre el elemento');
    });
    Explicacion
    El evento se dispara cuando el puntero del ratón entra en el área del elemento.
  6. 6mouseout Descripción: Se dispara cuando el ratón sale de un elemento. Categoría: Evento de desplazamiento del ratón.Ejemplo:
    element.addEventListener('mouseout', function() {
    console.log('Ratón fuera del elemento');
    });
    Explicacion:
    Se ejecuta la función cuando el puntero del ratón sale del área del elemento.
  7. 7. mousemove Descripción: Se activa cuando el ratón se mueve sobre un elemento. Categoría: Evento de movimiento del ratón.Ejemplo:
    element.addEventListener('mousemove', function() {
    console.log('Ratón moviéndose sobre el elemento');
    });
    Explicación
    El evento detecta el movimiento continuo del ratón sobre el elemento.:
  8. 8contextmenu Descripción: Se dispara al hacer clic con el botón derecho del ratón. Categoría: Evento de clic derecho.Ejenmplo:
    element.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // Evitar menú contextual
    console.log('Clic derecho en el elemento');
    });
    Explicación:
    El evento se ejecuta al hacer clic derecho y puede usarse para personalizar el menú contextual.
  9. 9mouseenter Descripción: Se activa cuando el ratón entra en un elemento (no incluye hijos). Categoría: Evento de desplazamiento del ratón.Ejemplo:
    element.addEventListener('mouseenter', function() {
    console.log('Ratón entró al elemento');
    });
    Explicacion:
    Detecta cuando el ratón entra al área del elemento, sin contar los elementos hijos.
  10. 10mouseleave Descripción: Se dispara cuando el ratón sale del elemento (no incluye hijos). Categoría: Evento de desplazamiento del ratón.Ejemplo:
    element.addEventListener('mouseleave', function() {
    console.log('Ratón salió del elemento');
    });
    explicación
    Se ejecuta cuando el puntero sale del elemento, pero no al pasar a un hijo del mismo.
  11. 11wheel Descripción: Se dispara cuando se usa la rueda del ratón. Categoría: Evento de desplazamiento.Ejemplo:
    element.addEventListener('wheel', function(event) {
    console.log('Rueda del ratón usada: ' + event.deltaY);
    });
    Explicacion:
    Este evento se activa al desplazar la rueda del ratón, detectando la dirección y velocidad del desplazamiento.
  12. 12Eventos deTECLADO
  13. 13keydown Descripción: Se dispara cuando se presiona cualquier tecla. Categoría: Evento de teclado (al presionar).Ejemplo:
    document.addEventListener('keydown', function(event) {
    console.log('Tecla presionada: ' + event.key);
    });
    Explicación:
    Se ejecuta cuando el usuario presiona una tecla, mostrando qué tecla fue presionada.
  14. 14keyup Descripción: Se dispara cuando se suelta una tecla. Categoría: Evento de teclado (al soltar).Ejemplo:
    document.addEventListener('keyup', function(event) {
    console.log('Tecla soltada: ' + event.key);
    });
    Explicacion:
    El evento se ejecuta cuando el usuario suelta una tecla, mostrando la tecla que se liberó.
  15. 15Eventos deFormularios
  16. 16submit Descripción: Se dispara cuando se envía un formulario. Categoría: Evento de envío de formulario.Ejemplo:
    let form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
    event.preventDefault(); // Evita el envío del formulario
    console.log('Formulario enviado');
    });
    Explicación:
    Se intercepta el evento de envío de formulario, permitiendo ejecutar lógica personalizada antes de su envío.
  17. 17input Descripción: Se dispara cada vez que cambia el valor de un campo de entrada mientras se escribe. Categoría: Evento de entrada en tiempo real.Ejemplo:
    let inputField = document.querySelector('input');
    inputField.addEventListener('input', function() {
    console.log('Valor actual: ' + inputField.value);
    });
    Explicación:
    Se activa continuamente mientras el usuario escribe, reflejando cada cambio en tiempo real.
  18. 18focus Descripción: Se dispara cuando un campo del formulario gana el foco (es seleccionado). Categoría: Evento de enfoque.Explicacion:
    let inputField = document.querySelector('input');
    inputField.addEventListener('focus', function() {
    console.log('El campo ha ganado el foco');
    });
    Explicación:
    Detecta cuándo un campo de formulario es seleccionado para ser editado, generalmente mediante un clic o al usar la tecla "tab".
  19. 19change Descripción: Se dispara cuando el valor de un campo de formulario cambia y pierde el foco. Categoría: Evento de cambio de valor.Ejemplo:
    let inputField = document.querySelector('input');
    inputField.addEventListener('change', function() {
    console.log('El valor cambió a: ' + inputField.value);
    });
    Explicación:
    Detecta cuando el usuario cambia el valor de un campo de formulario y sale del campo (pierde el foco).
  20. 20blur Descripción: Se dispara cuando un campo del formulario pierde el foco. Categoría: Evento de pérdida de enfoque.Ejemplo:
    let inputField = document.querySelector('input');
    inputField.addEventListener('blur', function() {
    console.log('El campo ha perdido el foco');
    });
    Explicación:
    Se activa cuando el usuario sale de un campo de entrada después de interactuar con él.
  21. 21reset Descripción: Se dispara cuando un formulario es reiniciado (vuelve a sus valores predeterminados). Categoría: Evento de reinicio de formulario.Ejemplo:
    let form = document.querySelector('form');
    form.addEventListener('reset', function() {
    console.log('Formulario reiniciado');
    });
    Explicacion:
    Este evento detecta cuando un formulario ha sido restablecido a sus valores originales.
  22. 22Eventos deFocus
  23. 23focusin Descripción: Se dispara cuando un elemento dentro del formulario o el propio campo gana el foco. Similar a focus, pero se propaga hacia arriba. Categoría: Evento de enfoque.Ejemplo:
    form.addEventListener('focusin', function() {
    console.log('Un campo dentro del formulario ha ganado el foco');
    });
    Explicación:
    Detecta cuando cualquier campo de un formulario recibe el foco, incluyendo propagación a elementos padre.
  24. 24focusout Descripción: Se dispara cuando un campo del formulario pierde el foco. Similar a blur, pero se propaga hacia arriba. Categoría: Evento de pérdida de enfoque.Ejemplo:
    form.addEventListener('focusout', function() {
    console.log('Un campo dentro del formulario ha perdido el foco');
    });
    Explicacion:
    Detecta cuando cualquier campo de un formulario pierde el foco, incluyendo propagación a elementos padre.
  25. 25EventosComunes
  26. 26DOMContentLoaded Descripción: Se dispara cuando el HTML ha sido completamente cargado y parseado, pero antes de que se carguen los estilos y recursos externos. Categoría: Evento de carga del DOM.Ejemplo:
    document.addEventListener('DOMContentLoaded', function() {
    console.log('El DOM ha sido completamente cargado');
    });
    Explicacion:
    El evento se ejecuta cuando la estructura del documento HTML está completamente cargada y accesible.
  27. 27load Descripción: Se dispara cuando la página completa (incluyendo imágenes y otros recursos externos) ha sido cargada. Categoría: Evento de carga completa.Ejemplo:
    window.addEventListener('load', function() {
    console.log('Todos los recursos, incluidos los externos, han sido cargados');
    });
    Explicacion:
    Este evento se activa cuando la página y todos sus recursos
  28. 28resize Descripción: Se dispara cuando se cambia el tamaño de la ventana del navegador. Categoría: Evento de cambio de tamaño.Ejemplo:
    window.addEventListener('resize', function() {
    console.log('Tamaño de la ventana cambiado: ' + window.innerWidth + 'x' + window.innerHeight);
    });
    Explicacion:
    Este evento se ejecuta cada vez que el usuario cambia el tamaño de la ventana.
  29. 29scroll Descripción: Se dispara cuando se desplaza la barra de scroll en un elemento. Categoría: Evento de desplazamiento.Ejemplo:
    window.addEventListener('scroll', function() {
    console.log('Se ha desplazado el scroll. Posición actual: ' + window.scrollY);
    });
    Explicacion:
  30. 30Eventos deDRAG Y DROP
  31. 31dragstart Descripción: Se dispara cuando se empieza a arrastrar un elemento. Categoría: Evento de inicio de arrastre.Ejemplo:
    let draggable = document.querySelector('.draggable');
    draggable.addEventListener('dragstart', function(event) {
    console.log('Arrastre iniciado');
    event.dataTransfer.setData('text/plain', 'Este es el dato arrastrado');
    });
    Explicacion:
    Inicia el proceso de arrastre, permitiendo transferir datos o estilos. Aquí se almacena un dato para su uso posterior al soltar el elemento.
  32. 32dragover Descripción: Se dispara cuando el elemento arrastrado está sobre una zona de destino . Categoría: Evento durante el arrastre sobre la zona de destino.Ejemplo:
    let dropZone = document.querySelector('.dropzone');
    dropZone.addEventListener('dragover', function(event) {
    event.preventDefault(); // Permite soltar el elemento
    console.log('Arrastrando sobre la zona de destino');
    });
    Explicacion:
    Este evento ocurre mientras el elemento arrastrado se mueve sobre la zona de destino.
  33. 33drop Descripción: Se dispara cuando el elemento arrastrado es soltado en una zona de destino válida. Categoría: Evento de soltarEjemplo:
    let dropZone = document.querySelector('.dropzone');
    dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    let data = event.dataTransfer.getData('text/plain');
    console.log('Elemento soltado. Dato transferido: ' + data);
    });
    Explicacion:
    Este evento se activa cuando el usuario suelta el elemento en una zona de destino.
  34. 34dragend Descripción: Se dispara cuando el proceso de arrastre ha terminado (cuando se suelta el elemento o se cancela el arrastre). Categoría: Evento de fin de arrastre.Ejemplo:
    let draggable = document.querySelector('.draggable');
    draggable.addEventListener('dragend', function() {
    console.log('Arrastre finalizado');
    });
    Explicacion:
    Detecta cuándo se ha completado el arrastre, independientemente de si se ha soltado el elemento en un destino válido.
  35. 35EventosMultimedia
  36. 36play Descripción: Se dispara cuando la reproducción de un medio comienza (o se reanuda tras haber estado pausada). Categoría: Evento de reproducción.Ejemplo:
    let video = document.querySelector('video');
    video.addEventListener('play', function() {
    console.log('El video ha comenzado a reproducirse');
    });
    Explicación:
    Este evento se ejecuta cuando el video o audio comienza a reproducirse, ya sea al inicio o después de haber sido pausado.
  37. 37pause Descripción: Se dispara cuando la reproducción del medio es pausada. Categoría: Evento de pausa.Ejemplo:
    let video = document.querySelector('video');
    video.addEventListener('pause', function() {
    console.log('El video ha sido pausado');
    });
    Explicación:
    Este evento se dispara cuando la reproducción es detenida temporalmente por el usuario o el sistema.
  38. 38ended Descripción: Se dispara cuando la reproducción de un medio ha finalizado. Categoría: Evento de fin de reproducción.Ejemplo:
    let video = document.querySelector('video');
    video.addEventListener('ended', function() {
    console.log('El video ha terminado');
    });
    Explicación:
    Este evento detecta cuando el video o audio ha llegado al final de su duración y ha dejado de reproducirse.
  39. 39Eventos dePortapapeles
  40. 40copy Descripción: Se dispara cuando el usuario copia contenido al portapapeles. Categoría: Evento de copia.Ejemplo:
    document.addEventListener('copy', function(event) {
    console.log('Contenido copiado al portapapeles');
    });
    Explicaciones:
    Este evento se activa cuando el usuario copia algún contenido
  41. 41cut Descripción: Se dispara cuando el usuario corta contenido al portapapeles. Categoría: Evento de corte.Ejemplo:
    document.addEventListener('cut', function(event) {
    console.log('Contenido cortado al portapapeles');
    });
    Explicacion:
    Este evento detecta cuando el usuario corta el contenido
  42. 42paste Descripción: Se dispara cuando el usuario pega contenido desde el portapapeles. Categoría: Evento de pegado.Ejemplo:
    document.addEventListener('paste', function(event) {
    console.log('Contenido pegado desde el portapapeles');
    });
    Expliciones:
    Este evento se dispara cuando el usuario pega contenido en un campo
  43. 43EventosTouch
  44. 44touchstart Descripción: Se dispara cuando uno o más puntos de contacto (dedos) tocan la pantalla. Categoría: Evento de inicio táctil.Ejemplo:
    document.addEventListener('touchstart', function(event) {
    console.log('Pantalla tocada. Número de toques: ' + event.touches.length);
    });
    Explicacion:
    Este evento detecta cuando el usuario comienza a tocar la pantalla, ideal para iniciar gestos o detectar el primer punto de contacto.
  45. 45touchmove Descripción: Se dispara cuando uno o más puntos de contacto se mueven en la pantalla. Categoría: Evento de movimiento táctil.Ejemplo:
    document.addEventListener('touchmove', function(event) {
    console.log('Movimiento táctil detectado. Coordenadas X: ' + event.touches[0].clientX + ', Y: ' + event.touches[0].clientY);
    });
    Explicaciones:
    Este evento se activa cuando los dedos se desplazan mientras están en contacto con la pantalla, útil para rastrear gestos como desplazamientos, deslizamientos o arrastres.
  46. 46touchend Descripción: Se dispara cuando uno o más puntos de contacto se levantan de la pantalla. Categoría: Evento de fin táctil.Ejemplo:
    document.addEventListener('touchend', function(event) {
    console.log('El toque ha terminado. Número de toques restantes: ' + event.touches.length);
    });
    Explicaciones:
  47. 47eventos deVentana
  48. 48visibilitychange Descripción: Se dispara cuando la visibilidad de la página cambia (cuando el usuario cambia de pestaña o minimiza la ventana) . Categoría: Evento de visibilidad.Ejemplo:
    document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
    console.log('La página está oculta');
    } else {
    console.log('La página está visible');
    }
    Explicaciones:
    Este evento detecta si la página está visible o no. Se utiliza
    });
  49. 49fullscreenchange Descripción: Se dispara cuando se cambia el estado de pantalla completa (cuando la página o un elemento entra o sale de pantalla completa). Categoría: Evento de pantalla completa.Ejemplo:
    document.addEventListener('fullscreenchange', function() {
    if (document.fullscreenElement) {
    console.log('Ahora en modo pantalla completa');
    } else {
    console.log('Se ha salido del modo pantalla completa');
    }
    });
    Explicacion:
    Este evento permite detectar cuándo la página o un elemento entra o sale de pantalla completa, lo que es útil para ajustar la interfaz de usuario
  50. 50online Descripción: Se dispara cuando la conexión a internet se restablece. Categoría: Evento de conectividad.Ejemplo:
    window.addEventListener('online', function() {
    console.log('Conexión a internet restaurada');
    });
    Explicacion:
    Este evento se activa cuando la página recupera la conexión a internet. Es útil para notificar al usuario o reintentar tareas en línea que fallaron durante el estado desconectado.

Information

Description
Flashcards on Ejercisiojs, created by ANTONIO MIKEL ORTIZ MOHEDANO on 28/10/2024.
Views
9
Rating

Feedback

What is it about?

What do you think of the new look?

How do you like it?