Flashcards
Eventos JS
Cards in this deck (38)
- 1Click | Evento de Ratón Se dispara cuando el usuario hace clic en un elemento. En el siguiente ejemplo se crea una función de nombre button, agrega el evento click y cuando el evento sucede se muestra un mensaje.
- 2dblclick | Evento de Ratón Se dispara al hacer doble clic en un elemento. En el siguiente ejemplo se crea una función de nombre box, busca el primer elemento en el documento que tiene la clase box y lo asigna a la constante box., luego añade un evento de escucha al elemento box para detectar cuando se realiza un doble clic.Muestra una alerta cuando se detecta el doble clic.
- 3mouseover | Evento de Ratón Se dispara cuando el puntero del ratón entra en el área de un elemento. En el siguiente ejemplo se selecciona una imagen, busca el primer elemento en el documento y lo asigna a la constante image. Agrega un evento de escucha al elemento image para detectar cuando el cursor del ratón pasa sobre la imagen cambia la opacidad.Cuando el mouse se coloca sobre la imagen, se ejecuta la función de callback.
- 4mouseout | Evento de Ratón Se dispara cuando el puntero del ratón sale del área de un elemento. En el siguiente ejemplo se añade un evento que se activa cuando el cursor del ratón sale de la imagen. Dentro de la función establece la opacidad de la imagen de nuevo a 100%.
- 5mousedown | Evento de Ratón Ocurre cuando se presiona un botón del ratón sobre un elemento. En el siguiente ejemplo encuentra el primer elemento con la clase box. Establece un evento que se activa cuando se presiona el botón del ratón sobre la caja. Dentro de la función, cambia el color de fondo de la caja a rojo.
- 6mouseup | Evento de Ratón Ocurre cuando se suelta un botón del ratón sobre un elemento. En el siguiente ejemplo se escucha cuando se suelta el botón del ratón sobre la caja. Dentro de la función cambia el color de fondo de la caja a verde.
- 7mousemove | Evento de Ratón Se dispara continuamente mientras el ratón se mueve sobre un elemento. En el siguiente ejemplo se busca el primer elemento con la clase container. Detecta cuando mueves el ratón dentro del contenedor. Dentro de la función, actualiza el texto del contenedor para mostrar la posición del ratón en la pantalla (coordenadas X e Y).const container = document.querySelector(".container");
container.addEventListener("mousemove", (event) => {
container.textContent = Posición X: ${event.clientX}, Posición Y: ${event.clientY};
}); - 8contextmenu | Evento de Ratón Ocurre cuando se hace clic derecho para abrir el menú contextual. En el siguiente ejemplo se deshabilita el menú contextual del clic derecho y muestra una alerta que dice "Clic derecho deshabilitado" cuando intentas hacer clic derecho en la página.
- 9keydown | Eventos de teclado Ocurre cuando se presiona una tecla. En el siguiente ejemplo se agrega el evento keydown que mostrará la tecla presionada.
- 10keyup | Eventos de teclado Ocurre cuando se suelta una tecla. En el siguiente ejemplo se agrega el evento keyup que muestra en la consola el nombre de la tecla que se ha soltado.
- 11submit | Eventos de formulario Se dispara cuando un formulario es enviado. En el siguiente ejemplo evita el envío del formulario y muestra un mensaje en la consola cuando se intenta enviar.
- 12input | Eventos de formulario Ocurre cuando un valor es cambiado en un campo de formulario. En el siguiente ejemplo se muestra en la consola el valor ingresado en el campo de texto cada vez que se modifica.const inputField = document.querySelector("input");
inputField.addEventListener("input", () => {
console.log(Valor ingresado: ${inputField.value});
}); - 13focus | Eventos del formulario Ocurre cuando un elemento (como un campo de texto) recibe el foco. En el siguiente ejemplo se crea una función que muestra un mensaje en la consola cuando el campo de texto gana el foco.
- 14blur | Eventos de Formulario Ocurre cuando un elemento pierde el foco. En el siguiente ejemplo se muestra un mensaje en la consola cuando el campo de texto pierde el foco..
- 15reset | Eventos de formulario Ocurre cuando un formulario es reseteado. En el siguiente ejemplo se muestra un mensaje en la consola cuando el formulario es reseteado.
- 16change | Eventos de Formulario Ocurre cuando cambia el valor de un elemento y se pierde el foco. En el siguiente ejemplo se muestra en la consola el valor seleccionado cada vez que cambia la opción del menú desplegable.const selectElement = document.querySelector("select");
selectElement.addEventListener("change", () => {
console.log(Seleccionaste: ${selectElement.value});
}); - 17DOMContentLoaded | Otros Eventos Comunes Ocurre cuando el HTML ha sido completamente cargado. En el siguiente ejemplo se muestra un mensaje en la consola cuando el DOM ha sido completamente cargado.
- 18load | Otros Eventos Comunes Ocurre cuando la página completa (incluyendo imágenes, scripts, etc.) ha cargado. En el siguiente ejemplo se muestra un mensaje en la consola cuando la página se ha cargado completamente, incluyendo todos los recursos.
- 19resize | Otros Eventos Comunes Ocurre cuando la ventana del navegador cambia de tamaño. En el siguiente ejemplo se muestra un mensaje en la consola cuando se cambia el tamaño de la ventana del navegador.
- 20scroll | Otros Eventos Comunes Ocurre cuando se desplaza la barra de scroll en la página o en un elemento. En el siguiente ejemplo se muestra un mensaje en la consola cuando la página se desplaza.
- 21dragstart | Eventos de Drag & Drop Ocurre cuando se inicia el arrastre de un elemento. En el siguiente ejemplo se muestra un mensaje en la consola cuando comienza a arrastrarse el elemento con la clase draggable.
- 22dragover | Eventos de Drag & Drop Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado. En el siguiente ejemplo se permite el "drop" y muestra un mensaje en la consola cuando un elemento es arrastrado sobre la zona de destino.
- 23drop | Eventos de Drag & Drop Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado. En el siguiente ejemplo se evita el comportamiento por defecto y muestra un mensaje en la consola cuando se suelta un elemento en la zona de destino.
- 24dragend | Eventos de Drag & Drop Ocurre cuando se termina de arrastrar un elemento. En el siguiente ejemplo se muestra un mensaje en la consola cuando se termina de arrastrar el elemento.
- 25play | Eventos de Multimedia Ocurre cuando se empieza a reproducir un video o audio. En el siguiente ejemplo se selecciona un elemento de video en el DOM y muestra un mensaje en la consola cuando el video comienza a reproducirse.
- 26pause | Eventos de Multimedia Ocurre cuando se pausa un video o audio. En el siguiente ejemplo se muestra una alerta cuando el video ha sido pausado.
- 27ended | Eventos Multimedia Ocurre cuando un video o audio ha terminado de reproducirse. En el siguiente ejemplo se muestra una alerta cuando el video ha terminado su reproducción.
- 28copy | Eventos del Portapapeles Se dispara cuando el contenido es copiado al portapapeles. En el siguiente ejemplo se hace el evento de copia en el documento y muestra un mensaje en la consola cuando se copia contenido al portapapeles.
- 29cut | Eventos del Portapapeles Ocurre cuando el contenido es cortado al portapapeles. Escucha el evento de corte en el documento y muestra un mensaje en la consola cuando se corta contenido al portapapeles.
- 30paste | Eventos del Portapapeles Ocurre cuando se pega contenido desde el portapapeles. En el siguiente ejemplo, este código escucha el evento de pegado en el documento y muestra un mensaje en la consola cuando se pega contenido desde el portapapeles.
- 31focusin | Eventos de Focus Ocurre cuando un elemento está a punto de recibir el foco, similar a focus. En el siguiente ejemplo el código escucha el evento focusin en un campo de texto y muestra un mensaje en la consola cuando el campo está a punto de recibir el foco.
- 32focusout | Eventos de Focus Similar a blur, pero ocurre antes de que el elemento pierda el foco. En el siguiente ejemplo el código identifica el evento focusout en un campo de texto y muestra un mensaje en la consola cuando el campo está a punto de perder el foco.
- 33touchstart | Eventos deTouch (Dispositivos Táctiles) Ocurre cuando uno o más dedos tocan la pantalla. En el siguiente ejemplo el código llama al evento touchstart en el documento y muestra un mensaje en la consola cuando la pantalla es tocada.
- 34touchmove | Eventos deTouch (Dispositivos Táctiles) Ocurre cuando se mueve el dedo por la pantalla. En el siguiente ejemplo el código llama al evento touchmove en el documento y muestra un mensaje en la consola cuando hay un movimiento táctil en la pantalla.
- 35touchend | Eventos de Touch (Dispositivos Táctiles) Ocurre cuando uno o más dedos se levantan de la pantalla. En el siguiente ejemplo el código llama al evento touchend en el documento y muestra un mensaje en la consola cuando los dedos se levantan de la pantalla.
- 36visibilitychange | Eventos de Ventana Ocurre cuando la visibilidad de la página cambia. En el siguiente ejemplo de código se llama al evento visibilitychange y muestra un mensaje en la consola indicando si la página se ha vuelto visible o no visible.document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "hidden") {
console.log("Página no visible");
} else {
console.log("Página visible");
}
}); - 37fullscreenchange | Eventos de Ventana Ocurre cuando se entra o sale del modo de pantalla completa. En el siguiente ejemplo el código escucha el evento fullscreenchange y muestra un mensaje en la consola indicando si se ha activado o desactivado el modo de pantalla completa.document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
console.log("Pantalla completa activada");
} else {
console.log("Pantalla completa desactivada");
}
}); - 38online / offline | Eventos de Ventana Ocurre cuando el navegador detecta un cambio en el estado de conexión a internet. En el siguiente ejemplo el código llama a los eventos online y offline en la ventana, mostrando un mensaje en la consola cuando la conexión a Internet se activa o desactiva.
