Flashcards
Eventos en JavaScript
Cards in this deck (30)
- 1Evento de Ratón: Evento click Se dispara cuando el usuario hace clic en un elemento.Ejemplo:
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Recuento de clics: ${event.detail}`;});
Intente hacer clics rápidos y repetidos en el botón para aumentar el número de clics. Si se toma un descanso entre clics, el conteo se restablecerá. - 2Evento de Ratón Evento dblclick Se dispara cuando al hacer doble clic en un elemento.Ejemplo:
const card = document.querySelector("aside");
card.addEventListener("dblclick", (e) => {
card.classList.toggle("large"); });
Este ejemplo alterna el tamaño de una tarjeta cuando hace doble clic en ella.
- 3Evento de Ratón Evento mouseover Se dispara cuando el puntero del ratón entre en el área de un elemento.Ejemplo:
document.getElementById("miParrafo").addEventListener("mouseover", function() {
this.style.color = "red"; });
document.getElementById("miParrafo").addEventListener("mouseout", function() {
this.style.color = "blue"; });
Este código cambia el color de un párrafo cuando el ratón pasa por encima de él - 4Evento de Ratón Evento mouseout Se dispara cuando el puntero del ratón sale del área de un elemento.Ejemplo:
document.getElementById("miParrafo").addEventListener("mouseout", function() {
this.style.color = "blue"; });
se ejecuta cuando el ratón sale del área del párrafo y vuelve a cambiar el color del texto a azul. - 5Evento de Ratón Evento mousemove: Se dispara continuamente mientras el ratón se mueve sobre un elemento.Ejemplo:
document.addEventListener("mousemove", function(event) {
const x = event.clientX;
const y = event.clientY; document.getElementById("coordenadas").textContent = `Coordenadas del ratón: (${x}, ${y})`; });
Sirve para seguir la posición del ratón y actualizar las coordenadas en tiempo real dentro de un párrafo - 6Evento de Ratón Evento contextmenu: Ocurre cuando se hace clic derecho para abrir el menú contextual.Ejemplo:
const noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
e.preventDefault(); });
Como resultado, el primer párrafo no hará nada al hacer clic con el botón derecho, mientras que el segundo párrafo mostrará el menú contextual estándar que ofrece su navegador. - 7Evento de Teclado Evento keydown: Ocurre cuando se presiona una tecla.Ejemplo:
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("keydown", logKey);
function logKey(e) {
log.textContent += ` ${e.code}`; }
Este ejemplo registra el valor cada vez que presiona una tecla dentro del elemento . - 8Evento de Teclado Evento keyup: Ocurre cuando se suelta una tecla.Ejemplo:
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("keyup", logKey);
function logKey(e) {
log.textContent += ` ${e.code}`; }
Este ejemplo registra el valor cada vez que suelta una tecla dentro del elemento . - 9Evento de Formulario Evento submit: Se dispara cuando un formulario es enviado.Ejemplo:
document.getElementById("miFormulario").addEventListener("submit", function(event) { event.preventDefault(); // Evita el envío del formulario alert("Formulario enviado correctamente!"); });
Este código evita que el formulario se envíe de forma predeterminada y, en su lugar, muestra un mensaje de confirmación - 10Evento de Formulario Evento input: Ocurre cuando un valor es cambiado en un campo de formulario.Ejemplo:
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("input", updateValue);
function updateValue(e) {
log.textContent = e.target.value; }
Este ejemplo registra el valor cada vez que cambia el valor del elemento . - 11Evento de Formulario Evento focus: Ocurre cuando un elemento (campo de texto) recibe el foco.Ejemplo:
const password = document.querySelector('input[type="password"]');
password.addEventListener("focus", (event) => {
event.target.style.background = "pink"; });
password.addEventListener("blur", (event) => {
event.target.style.background = ""; });
Cambia el fondo del campo de entrada a rosa (pink) cuando recibe foco (es decir, cuando el usuario hace clic en él o lo selecciona de alguna manera). - 12Evento de Formulario Evento change: Se dispara cuando cambia el valor de un elemento y se pierde el foco.Ejemplo:
document.getElementById("nombre").addEventListener("change", function(event) { const mensaje = document.getElementById("mensaje"); mensaje.textContent = `Has cambiado el nombre a: ${event.target.value}`; });
Este evento se activa cuando el valor de un campo de entrada cambia - 13Evento de Formulario Evento reset: Ocurre cuando un formulario es reseteado.Ejemplo:
document.getElementById("miFormulario").addEventListener("reset", function(event) { alert("El formulario ha sido restablecido.");
Este evento se activa cuando el formulario se restablece a sus valores predeterminados - 14Otros Eventos Comunes Evento DOMContentLoaded: Ocurre cuando el HTML ha sido completamente cargado.Ejemplo:
document.addEventListener("DOMContentLoaded", function() { document.getElementById("mensaje").textContent = "¡El contenido HTML ha sido completamente cargado!"; });
Este evento se dispara cuando el contenido HTML inicial ha sido completamente cargado y analizado, sin esperar a que se carguen hojas de estilo, imágenes y subframes - 15Otros Eventos Comunes Evento load: Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado.Ejemplo:
window.addEventListener("load", function() { document.getElementById("mensaje").textContent = "¡Toda la página ha sido completamente cargada!"; });
Este evento se dispara cuando toda la página, incluidas todas las hojas de estilo, imágenes y subframes, se han cargado completamente - 16Otros Eventos Comunes Evento resize: Ocurre cuando la ventana del navegador cambia de tamaño.EJemplo:
window.addEventListener("resize", function() { document.getElementById("mensaje").textContent = `Ancho: ${window.innerWidth}, Alto: ${window.innerHeight}`; });
Este evento se dispara cada vez que la ventana del navegador cambia de tamaño - 17Eventos de Drag & Drop Evento dragstart: Se dispara cuando se inicia el arrastre de un elemento.Ejemplo:
document.getElementById("arrastrable").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text/plain", "Este elemento está siendo arrastrado"); event.target.style.opacity = "0.5"; // Cambia la opacidad del elemento mientras se arrastra }); document.getElementById("arrastrable").addEventListener("dragend", function(event) { event.target.style.opacity = "1"; // Restaura la opacidad cuando se deja de arrastrar });
En este caso, un elemento de la página se puede arrastrar. - 18Eventos de Drag & Drop Evento dragover: Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado.Ejemplo:
document.getElementById("zonaSoltar").addEventListener("dragover", function(event) { event.preventDefault(); event.dataTransfer.dropEffect = "move"; }); document.getElementById("zonaSoltar").addEventListener("drop", function(event) { event.preventDefault(); const data = event.dataTransfer.getData("text/plain"); event.target.textContent = "¡Elemento soltado!"; }); document.getElementById("arrastrable").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text/plain", "Este elemento está siendo arrastrado"); });
Aquí tienes un ejemplo de cómo manejar el evento dragover para permitir que un elemento sea soltado en una zona específica - 19Eventos de Drag & Drop Evento dragend: Ocurre cuando se termina de arrastrar un elemento.Ejemplo:
const arrastrable = document.getElementById("arrastrable"); arrastrable.addEventListener("dragend", function(event) { document.getElementById("mensaje").textContent = "Has terminado de arrastrar el elemento."; event.target.style.opacity = "1"; // Restaurar la opacidad }); arrastrable.addEventListener("dragstart", function(event) { event.target.style.opacity = "0.5"; // Cambiar la opacidad al arrastrar });
Se dispara cuando una operación de arrastrar y soltar ha terminado - 20Eventos de Multimedia Evento play: Ocurre cuando se empieza a reproducir un video o audio.Ejemplo:
document.getElementById("miVideo").addEventListener("play", function() { document.getElementById("mensaje").textContent = "¡El video ha comenzado a reproducirse!"; });
Este evento se dispara cuando un elemento de audio o video comienza a reproducirse. - 21Eventos de Multimedia Evento pause: Ocurre cuando se pausa un video o audio.Ejemplo:
document.getElementById("miVideo").addEventListener("pause", function() { document.getElementById("mensaje").textContent = "El video está en pausa."; });
Se activa cuando el video se pausa. - 22Eventos de Multimedia Evento ended: Ocurre cuando un video o audio ha terminado de reproducirse.Ejemplo:
document.getElementById("miVideo").addEventListener("ended", function() { document.getElementById("mensaje").textContent = "¡El video ha terminado de reproducirse!"; });
Se dispara cuando un elemento de audio o video ha terminado de reproducirse. - 23Eventos de Focus Evento focusin: Ocurre cuando un elemento está a punto de recibir el foco, similar a focus.Ejemplo:
document.getElementById("miFormulario").addEventListener("focusin", function(event) { event.target.classList.add("resaltado"); }); document.getElementById("miFormulario").addEventListener("focusout", function(event) { event.target.classList.remove("resaltado"); });
Se activa cuando uno de los campos del formulario recibe el foco y añade la clase resaltado que cambia el color de fondo a amarillo. - 24Eventos de Focus Evento focusout: Similar a blur, pero ocurre antes de que el elemento pierda el foco.Ejemplo:
document.getElementById("miFormulario").addEventListener("focusout", function(event) { event.target.classList.remove("resaltado"); }); document.getElementById("miFormulario").addEventListener("focusin", function(event) { event.target.classList.add("resaltado"); });
Se activa cuando uno de los campos del formulario pierde el foco y elimina la clase resaltado que cambia el color de fondo a amarillo. - 25Eventos deTouch (Dispositivos Táctiles) Evento touchstart: Ocurre cuando uno o más dedos tocan la pantalla.Ejemplo:
document.getElementById("areaTactil").addEventListener("touchstart", function(event) { document.getElementById("mensaje").textContent = "Elemento tocado."; event.target.style.backgroundColor = "yellow"; }); document.getElementById("areaTactil").addEventListener("touchend", function(event) { document.getElementById("mensaje").textContent = "Toque terminado."; event.target.style.backgroundColor = "lightgreen"; });
Se activa cuando el usuario toca el área verde, cambiando el fondo a amarillo y mostrando un mensaje. - 26Eventos deTouch (Dispositivos Táctiles) Evento touchmove: Ocurre cuando se mueve el dedo por la pantalla.Ejemplo:
document.getElementById("areaTactil").addEventListener("touchmove", function(event) { const touch = event.touches[0]; // Obtener el primer punto de toque const x = touch.clientX; const y = touch.clientY; document.getElementById("mensaje").textContent = `Posición del toque: (${x}, ${y})`; event.target.style.backgroundColor = "yellow"; }); document.getElementById("areaTactil").addEventListener("touchend", function(event) { document.getElementById("mensaje").textContent = "Toque terminado."; event.target.style.backgroundColor = "lightgreen"; });
Se activa cada vez que se detecta un movimiento táctil dentro del área verde. - 27Eventos deTouch (Dispositivos Táctiles) Evento touchend: Ocurre cuando uno o más dedos se levantan de la pantalla.Ejemplo:
document.getElementById("areaTactil").addEventListener("touchend", function(event) { document.getElementById("mensaje").textContent = "Toque terminado."; event.target.style.backgroundColor = "lightgreen"; }); document.getElementById("areaTactil").addEventListener("touchstart", function(event) { document.getElementById("mensaje").textContent = "Elemento tocado."; event.target.style.backgroundColor = "yellow"; });
Se activa cuando el usuario deja de tocar el área verde, mostrando un mensaje y restaurando el fondo a su color original. - 28Eventos de Ventana Evento visibilitychange: Ocurre cuando la visibilidad de la página cambia (por ejemplo, cuando el usuario cambia a otra pestaña).Ejemplo:
document.addEventListener("visibilitychange", function() { if (document.visibilityState === "hidden") { document.getElementById("mensaje").textContent = "La página está oculta."; } else { document.getElementById("mensaje").textContent = "¡Bienvenido de nuevo!"; } });
Se activa cada vez que la visibilidad de la página cambia. Si la página está oculta, el mensaje se actualiza para indicar que la página está oculta. - 29Eventos de Ventana Evento fullscreenchange: Ocurre cuando se entra o se sale del modo de pantalla completa.Ejemplo:
const boton = document.getElementById("pantallaCompleta"); const mensaje = document.getElementById("mensaje"); boton.addEventListener("click", function() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } }); document.addEventListener("fullscreenchange", function() { if (document.fullscreenElement) { mensaje.textContent = "La página está en modo pantalla completa."; } else { mensaje.textContent = "La página ha salido del modo pantalla completa."; } });
Al hacer clic en el botón "Pantalla Completa", la página entra en modo pantalla completa si no está ya en ese modo, o sale de él si ya lo está. - 30Eventos de Ventana Evento online / offline: Ocurre cuando el navegador detecta un cambio en el estado de conexión a internet.Ejmeplo:
function actualizarEstado() { const estado = navigator.onLine ? "en línea" : "desconectado"; document.getElementById("estado").textContent = `Actualmente estás ${estado}.`; } window.addEventListener("online", actualizarEstado); window.addEventListener("offline", actualizarEstado); // Comprobar el estado inicial actualizarEstado();
Se utilizan para detectar cambios en la conexión del navegador.
Information
- Description
- Fichas de los diferentes eventos que existen en JavaScript
- Created by
- JESUS ANGEL HERNANDEZ HERNANDEZ
- Views
- 16
- Rating