Flashcards
Eventos en Js
Cards in this deck (31)
- 1Click(Eventos de Ratón): Se dispara cuando el usuario hace clic en un elemento.Ejemplo:
const boton = document.getElementById("miBoton");
boton.addEventListener("click", () => { alert("¡Has hecho clic en el botón!");});
Explicación:
Al hacer clic en el botón con id="miBoton", el navegador ejecuta una función que muestra una alerta con el mensaje "¡Has hecho clic en el botón!". - 2dblclick(Eventos de Ratón): Se dispara al hacer doble clic en un elemento.Ejemplo:
const boton = document.getElementById("miBoton");
boton.addEventListener("dblclick", () => {
alert("¡Hiciste doble clic en el botón!");
});
Explicacion:
Al botón con id="miBoton". Cuando el usuario hace doble clic en el botón, se ejecuta la función dentro de addEventListener y aparece una alerta - 3mouseover(Eventos de Ratón): Se dispara cuando el puntero del ratón entra en el área de un elemento.Ejemplo:
const cuadro = document.getElementById("miCuadro"); cuadro.addEventListener("mouseover", () => { cuadro.style.backgroundColor = "yellow";});
Explicacion:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento mouseover. Cuando el usuario pasa el ratón sobre el cuadro, el color de fondo cambia a amarillo - 4mouseout(Eventos de Ratón): Se dispara cuando el puntero del ratón sale del área de un elemento.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("mouseout", () => {
cuadro.style.backgroundColor = "white";
});
Explicación:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento mouseout. Cuando el usuario mueve el ratón fuera del cuadro, el color de fondo cambia a blanco. - 5mousedown(Eventos de Ratón): Ocurre cuando se presiona un botón del ratón sobre un elemento.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("mousedown", () => { cuadro.style.backgroundColor = "red";
});
Explicación:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento mousedown. Cuando el usuario presiona el botón del ratón sobre el cuadro, el color de fondo cambia a rojo. - 6mouseup(Eventos de Ratón): Ocurre cuando se suelta un botón del ratón sobre un elemento.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("mouseup", () => {
cuadro.style.backgroundColor = "green";
});
Explicación:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento mouseup. Cuando el usuario suelta el botón del ratón sobre el cuadro, el color de fondo cambia a verde. - 7mousemove(Eventos de Ratón): Se dispara continuamente mientras el ratón se mueve sobre un elemento.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("mousemove", (event) => {
const x = event.clientX; // Posición X del ratón
const y = event.clientY; // Posición Y del ratón
cuadro.textContent = `Posición: (${x},${y})`;});
Explicación:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento mousemove. Cada vez que el usuario mueve el ratón sobre el cuadro, se actualiza el texto dentro del cuadro para mostrar la posición actual del ratón en coordenadas X e Y. - 8contextmenu(Eventos de Ratón): Ocurre cuando se hace clic derecho para abrir el menú contextual.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("contextmenu", (event) => {
event.preventDefault();
alert("¡Menú contextual abierto!");
});
Explicación:
seleccionamos un elemento con id="miCuadro" y le agregamos un evento contextmenu. Cuando el usuario hace clic derecho sobre el cuadro, se ejecuta la función que muestra una alerta,Usamos event.preventDefault() para evitar que aparezca el menú contextual predeterminado del navegador. - 9keydown(Eventos de Teclado): Ocurre cuando se presiona una tecla.Ejemplo:
const input = document.getElementById("miInput");
input.addEventListener("keydown", (event) => {console.log(`Se presionó la tecla: ${event.key}`); });
Explicacion:
Seleccionamos un elemento de entrada (input) con id="miInput" y le agregamos un evento keydown. Cada vez que el usuario presiona una tecla mientras el campo de entrada está enfocado, se ejecuta la función que registra en la consola la tecla presionada, utilizando event.key para obtener el valor de la tecla. - 10keyup(Eventos de Teclado): Ocurre cuando se suelta una tecla.Ejemplo:
const input = document.getElementById("miInput");
input.addEventListener("keyup", (event) => {
console.log(`Se soltó la tecla: ${event.key}`);});
Explicación:
seleccionamos un elemento de entrada con id="miInput" y le agregamos un evento keyup. Cada vez que el usuario suelta una tecla mientras el campo de entrada está enfocado, se ejecuta la función que registra en la consola la tecla soltada, utilizando event.key para obtener el valor de la tecla. - 11submit(Eventos de Formulario): Se dispara cuando un formulario es enviado.Ejemplo:
const cuadro = document.getElementById("miCuadro");
cuadro.addEventListener("contextmenu", (event) => {
event.preventDefault();
alert("¡Menú contextual abierto!");
});
Explicación:
Seleccionamos un elemento con id="miCuadro" y le agregamos un evento contextmenu. Cuando el usuario hace clic derecho sobre el cuadro, se ejecuta la función que muestra una alerta, Usamos event.preventDefault() para evitar que aparezca el menú contextual predeterminado del navegador. - 12input(Eventos de Formulario): Ocurre cuando un valor es cambiado en un campo de formulario.Ejemplo:
const input = document.getElementById("miInput");
input.addEventListener("input", (event) => {
console.log(`Valor actual: ${event.target.value}`); });
Explicación:
seleccionamos un elemento de entrada (input) con id="miInput" y le agregamos un evento input. Cada vez que el usuario escribe o modifica el valor en el campo de entrada, se ejecuta la función que registra en la consola el valor actual utilizando event.target.value. - 13focus(Eventos de Formulario): Ocurre cuando un elemento (campo de texto) recibe el foco.Ejemplos:
const input = document.getElementById("miInput");
input.addEventListener("focus", () => {
console.log("El campo de entrada está enfocado.");});
Explicación:
seleccionamos un elemento de entrada con id="miInput" y le agregamos un evento focus. Cuando el campo de entrada recibe el enfoque se ejecuta la función que registra en la consola el mensaje "El campo de entrada está enfocado.". - 14blur(Eventos de Formulario): Ocurre cuando un elemento pierde el foco.Ejemplo:
const input = document.getElementById("miInput");
input.addEventListener("blur", () => {
console.log("El campo de entrada ha perdido el enfoque."); });
Explicación:
seleccionamos un elemento de entradacon id="miInput" y le agregamos un evento blur. Cuando el campo de entrada pierde el enfoque, se ejecuta la función que registra en la consola el mensaje "El campo de entrada ha perdido el enfoque.". - 15change(Eventos de Formulario): Se dispara cuando cambia el valor de un elemento y se pierde el foco.Explicación:
const select = document.getElementById("miSelect");
select.addEventListener("change", (event) => {
console.log(`Seleccionaste: ${event.target.value}`); });
Ejemplo:
Seleccionamos un elemento con id="miSelect" y le agregamos un evento change. Cada vez que el usuario selecciona una opción diferente y pierde el enfoque del elemento, se ejecuta la función que registra en la consola el valor de la opción seleccionada usando event.target.value. - 16reset(Eventos de Formulario): Ocurre cuando un formulario es reseteado.Ejemplo:
const formulario = document.getElementById("miFormulario");
formulario.addEventListener("reset", () => {
console.log("El formulario ha sido restablecido."); });
Explicación:
Seleccionamos un formulario con id="miFormulario" y le agregamos un evento reset. Cuando el usuario hace clic en un botón de tipo reset, se ejecuta la función que registra en la consola el mensaje "El formulario ha sido restablecido.". - 17DOMContentLoaded(Otros Eventos Comunes): Ocurre cuando el HTML ha sido completamente cargado.Ejemplo:
document.addEventListener("DOMContentLoaded", () => {
const mensaje = document.createElement("p");
mensaje.textContent = "El DOM ha sido cargado completamente.";
document.body.appendChild(mensaje); });
Explicación:
El evento DOMContentLoaded se activa cuando todo el HTML ha sido cargado y parseado, lo que permite ejecutar código JavaScript que manipula el DOM de manera segura y efectiva, asegurando que todos los elementos estén disponibles. - 18load(Otros Eventos Comunes): Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado.Ejemplo:
window.addEventListener("load", () => {
const mensaje = document.createElement("p");
mensaje.textContent = "La página ha sido completamente cargada.";
document.body.appendChild(mensaje); });
Explicación:
El evento load se activa cuando todos los elementos de la página han sido completamente cargados, lo que permite ejecutar código JavaScript que puede depender de la disponibilidad total de recursos, asegurando que todo esté listo para su manipulación. - 19resize(Otros Eventos Comunes): Ocurre cuando la ventana del navegador cambia de tamaño.Ejemplo:
window.addEventListener("resize", () => {
console.log(`El tamaño de la ventana ha cambiado a: ${window.innerWidth}x${window.innerHeight}`);});
Explicación:
El evento resize se activa cuando el tamaño de la ventana del navegador cambia, permitiendo ejecutar código que puede ajustar elementos de la página o realizar otras acciones en respuesta a la modificación del tamaño de la ventana. - 20dragstart(Eventos de Drag & Drop): Se dispara cuando se inicia el arrastre de un elemento.Ejemplo:
const draggable = document.getElementById("miElemento");
draggable.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", event.target.id);
console.log("Se ha iniciado el arrastre del elemento:", event.target.id); });
Explicación:
se activa al iniciar el proceso de arrastre de un elemento, lo que permite ejecutar código específico, como preparar los datos que se van a transferir o cambiar estilos visuales para indicar que el elemento está en modo de arrastre. - 21dragover(Eventos de Drag & Drop): Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado.Ejemplo:
const dropArea = document.getElementById("miZonaDeDrop");
dropArea.addEventListener("dragover", (event) => {
event.preventDefault();
console.log("El elemento está siendo arrastrado sobre la zona de drop.");
});
Explicación:
Seleccionamos un elemento con id="miZonaDeDrop" que servirá como área de destino para soltar otros elementos. Al arrastrar un elemento sobre este área, se ejecuta la función que previene el comportamiento predeterminado del navegador. Además, se registra un mensaje en la consola para indicar que el elemento está siendo arrastrado sobre la zona de drop. - 22drop(Eventos de Drag & Drop): Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado.Ejemplo:
const dropArea = document.getElementById("miZonaDeDrop");
dropArea.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
console.log(`Se ha soltado el elemento con ID: ${data}`);});
Explicación:
Seleccionamos un elemento con id="miZonaDeDrop" que actuará como el área de destino para soltar otros elementos. Cuando un elemento se suelta sobre esta área, se ejecuta la función que previene el comportamiento predeterminado. Luego, se obtienen los datos transferidos usando event.dataTransfer.getData(), y se registra un mensaje en la consola indicando el ID del elemento que ha sido soltado. - 23dragend(Eventos de Drag & Drop): Ocurre cuando se termina de arrastrar un elemento.Ejemplo:
const draggable = document.getElementById("miElemento");
draggable.addEventListener("dragend", () => {
console.log("El arrastre del elemento ha finalizado.");
draggable.style.opacity = "1"; });
Explicación:
Seleccionamos un elemento con id="miElemento" que es arrastrable. Al terminar el arrastre, la función restablece la opacidad del elemento a su valor original (1), indicando visualmente que el proceso de arrastre ha finalizado. Además, se registra en la consola el mensaje "El arrastre del elemento ha finalizado.". - 24play(Eventos de Multimedia): Ocurre cuando se empieza a reproducir un video o audio.Ejemplo:
const video = document.getElementById("miVideo");
video.addEventListener("play", () => {
console.log("El video ha comenzado a reproducirse.");
});
Explicacion:
Seleccionamos un elemento de video con id="miVideo" y le agregamos un evento play. Cuando el usuario inicia la reproducción del video, se ejecuta la función que muestra en la consola el mensaje - 25pause(Eventos de Multimedia): Ocurre cuando se pausa un video o audio.Ejemplo:
const video = document.getElementById("miVideo");
video.addEventListener("play", () => {
console.log("El video ha comenzado a reproducirse.");
});
Explicación:
Seleccionamos un elemento de video con id="miVideo" y le agregamos un evento play. Cuando el usuario inicia la reproducción del video, se ejecuta la función que muestra en la consola el mensaje - 26pause(Eventos de Multimedia): Ocurre cuando se pausa un video o audio.Ejemplo:
const video = document.getElementById("miVideo");
video.addEventListener("pause", () => {
console.log("El video se ha pausado.");
});
Explicación:
Seleccionamos un elemento de video con id="miVideo" y le agregamos un evento pause. Cuando el usuario pausa la reproducción del video, se ejecuta la función que muestra en la consola el mensaje - 27ended(Eventos de Multimedia): Ocurre cuando un video o audio ha terminado de reproducirse.Ejemplo:
const video = document.getElementById("miVideo");
video.addEventListener("ended", () => {
console.log("El video ha terminado.");
});
Explicación:
Seleccionamos un elemento de video con id="miVideo" y le agregamos un evento ended. Cuando el video termina de reproducirse, se ejecuta la función que muestra en la consola el mensaje - 28copy(Eventos del Portapapeles): Se dispara cuando el contenido es copiado al portapapeles.Ejemplo:
const texto = document.getElementById("miTexto");
texto.addEventListener("copy", (event) => {
console.log("Se ha copiado el texto.");
});
Explicación:
Seleccionamos un elemento con id="miTexto" y le agregamos un evento copy. Cuando el usuario copia el contenido de este elemento (por ejemplo, seleccionando el texto y usando Ctrl+C o el menú de copiar), se ejecuta la función que muestra en la consola el mensaje - 29cut(Eventos del Portapapeles): Ocurre cuando el contenido es cortado al portapapeles.Ejemplo:
const texto = document.getElementById("miTexto");
texto.addEventListener("cut", (event) => {
console.log("Se ha cortado el texto.");
});
Explicación:
Seleccionamos un elemento con id="miTexto" y le agregamos un evento cut. Cuando el usuario corta el contenido de este elemento, se ejecuta la función que muestra en la consola el mensaje - 30paste(Eventos del Portapapeles): Ocurre cuando se pega contenido desde el portapapeles.Ejemplo:
const input = document.getElementById("miInput");
input.addEventListener("paste", (event) => {
console.log("Se ha pegado contenido en el campo de entrada.");
});
Explicación:
Seleccionamos un elemento con id="miInput" y le agregamos un evento paste. Cuando el usuario pega contenido en este campo de entrada, se ejecuta la función que muestra en la consola el mensaje - 31focusin(Eventos de Focus): Ocurre cuando un elemento está a punto de recibir el foco, similar a focus.Ejemplo:
const form = document.getElementById("miFormulario");
form.addEventListener("focusin", (event) => {
console.log(`El elemento ${event.target.tagName} ha recibido el foco.`);
});
Explicacion:
seleccionamos un formulario con id="miFormulario" y le agregamos un evento focusin. Cuando cualquier campo de entrada dentro de este formulario recibe el foco, se ejecuta la función que muestra en la consola el mensaje indicando el elemento que recibió el foco usando event.target.tagName.