Fichas
Sin título
Fichas del conjunto (30)
- 1Click Evento de ratón Se dispara cuando el usuario hace clic en un elemento. Explicación: el evento click desencadena una acción definida por el programador en el componente que recibe el clic.Haz clic aquí
document.getElementById("miboton").addEventListener("click", function(){
alert('!Haz clic¡');
}); - 2dblclick Evento de ratón Se dispara al hacer doble clic en un elemento.const elemento = document.getElementById("miElemento");
elemento.addEventListener("dblclick", function(event) {
console.log("El elemento ha sido doble clicado"); - 3mouseover Evento de ratón Se dispara cuando el puntero del ratón entra en el área de un elemento. Explicación: cuando el cursor del ratón entra en el área del elemento, se ejecuta una función que imprime en la consola el mensaje "El ratón está sobre el elemento".const elemento = document.getElementById("miElemento");
elemento.addEventListener("mouseover", function(event) {
console.log("El ratón está sobre el elemento");
}); - 4mouseout Evento de ratón Se dispara cuando el puntero del ratón sale del área de un elemento. Explicación: cuando el cursor del ratón sale del área del elemento, se ejecuta una función que imprime en la consola el mensaje "El ratón ha salido del elemento".const elemento = document.getElementById("miElemento");
elemento.addEventListener("mouseout", function(event) {
console.log("El ratón ha salido del elemento");
}); - 5mousedown Evento de ratón Ocurre cuando se presiona un botón del ratón sobre un elemento. Explicación: cuando cualquier botón del ratón es presionado mientras el cursor está sobre el elemento, se ejecuta la función proporcionada. En este caso, la función simplemente imprime en la consola el mensaje "Se ha presionado el botón del ratón sobre el elemento".const elemento = document.getElementById("miElemento");
elemento.addEventListener("mousedown", function(event) {
console.log("Se ha presionado el botón del ratón sobre el elemento");
}); - 6mouseup Evento de ratón Ocurre cuando se suelta un botón del ratón sobre un elemento. Explicación: cuando se suelta un botón del ratón mientras el cursor está sobre el elemento, se ejecuta la función proporcionada. En este caso, la función simplemente imprime en la consola el mensaje "Se ha soltado el botón del ratón sobre el elemento".const elemento = document.getElementById("miElemento");
elemento.addEventListener("mouseup", function(event) {
console.log("Se ha soltado el botón del ratón sobre el elemento");
}); - 7mousemove Evento de ratón Se dispara continuamente mientras el ratón se mueve sobre un elemento. Explicación: cuando el cursor del ratón se mueve sobre el área del elemento, se ejecuta la función proporcionada. En este caso, la función imprime en la consola las coordenadas actuales del cursor del ratón en relación con la ventana del navegador, usando event.clientX y event.clientY.const elemento = document.getElementById("miElemento");
elemento.addEventListener("mousemove", function(event) {
console.log(`El ratón se está moviendo. Posición: (${event.clientX}, ${event.clientY})`);
}); - 8contextmenu Evento de ratón Ocurre cuando se hace clic derecho para abrir el menú contextual. Explicación: cuando haces clic derecho sobre ese elemento, la función proporcionada se ejecuta.const elemento = document.getElementById("miElemento");
elemento.addEventListener("contextmenu", function(event) {
event.preventDefault();
console.log("Menú de contexto personalizado abierto");
}); - 9keydown Evento de teclado Ocurre cuando se presiona una tecla. Explicación: permite detectar cuando una tecla es presionada mientras el foco está en el elemento miInput, y luego imprime el nombre de la tecla en la consola.const inputElement = document.getElementById("miInput");
inputElement.addEventListener("keydown", function(event) {
console.log("Tecla presionada: " + event.key);
}); - 10keyup Evento de teclado Ocurre cuando se suelta una tecla. Explicación: permite detectar cuándo se suelta una tecla mientras el foco está en el elemento miInput, y luego imprime el nombre de la tecla en la consola.const inputElement = document.getElementById("miInput");
inputElement.addEventListener("keyup", function(event) {
console.log("Tecla soltada: " + event.key);
}); - 11DOMContentLoaded Evento común Ocurre cuando el HTML ha sido completamente cargado. Explicación: el evento DOMContentLoaded se dispara cuando el documento HTML ha sido completamente cargado y parseado, pero antes de que se hayan cargado todos los recursos externos como imágenes y hojas de estilo.document.addEventListener("DOMContentLoaded", function(event) {
console.log("El DOM ha sido completamente cargado");
}); - 12load Evento común Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado. Explicación: la función simplemente imprime en la consola el mensaje "La página ha sido completamente cargada".window.addEventListener("load", function(event) {
console.log("La página ha sido completamente cargada");
}); - 13resize Evento común Ocurre cuando la ventana del navegador cambia de tamaño. Explicación: cada vez que redimensionas la ventana del navegador, esta función se activa y ejecuta el código dentro del listener. En este caso, imprime en la consola el nuevo tamaño de la ventana (window.innerWidth y window.innerHeight).window.addEventListener("resize", function(event) {
console.log("La ventana ha sido redimensionada. Nuevo tamaño: " + window.innerWidth + "x" + window.innerHeight);
}); - 14scroll Evento común Ocurre cuando se desplaza la barra de scroll en la página o en un elemento con scroll. Explicación: la función imprime en la consola la posición actual del desplazamiento vertical de la ventana utilizando window.scrollY.window.addEventListener("scroll", function(event) {
console.log("La página se está desplazando. Posición actual: " + window.scrollY); - 15dragstart Evento de Drag & Drop Se dispara cuando se inicia el arrastre de un elemento. Explicación: permite detectar el inicio de un arrastre de un elemento específico y realizar acciones, como registrar datos en la consola o transferir datos para su uso posterior durante el arrastre.const draggableElement = document.getElementById("miElemento");
draggableElement.addEventListener("dragstart", function(event) {
console.log("El arrastre ha comenzado");event.dataTransfer.setData("text/plain", event.target.id);
}); - 16dragover Evento Drag & Drop Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado. Explicación: permite detectar cuando un elemento está siendo arrastrado sobre una zona específica y realizar alguna acción en respuesta a ese evento, como permitir que el elemento sea soltado en dicha zona.const dropZone = document.getElementById("miZonaDeSoltar");
dropZone.addEventListener("dragover", function(event) {
event.preventDefault();
console.log("El elemento está siendo arrastrado sobre la zona de soltar");
}); - 17drop Evento Drag & Drop Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado. Explicación: permite detectar cuándo un elemento arrastrado es soltado en la zona específica (miZonaDeSoltar), evita la acción predeterminada del navegador, y maneja los datos transferidos, por ejemplo, mostrando esos datos en la consola.const dropZone = document.getElementById("miZonaDeSoltar");
dropZone.addEventListener("drop", function(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
console.log("Datos soltados: " + data);
}); - 18dragend Evento Drag & Drop Ocurre cuando se termina de arrastrar un elemento. Explicación: permite detectar cuando el usuario ha terminado de arrastrar un elemento específico y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const draggableElement = document.getElementById("miElemento");
draggableElement.addEventListener("dragend", function(event) {
console.log("El arrastre ha terminado");
}); - 19touchstart Evento de touch Ocurre cuando uno o más dedos tocan la pantalla. Explicación: permite detectar el inicio de un toque en un elemento específico y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const touchElement = document.getElementById("miElemento");
touchElement.addEventListener("touchstart", function(event) {
console.log("El elemento ha sido tocado");
}); - 20touchmove Evento touch Ocurre cuando se mueve el dedo por la pantalla. Explicación: permite detectar el movimiento táctil sobre un elemento específico y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const touchElement = document.getElementById("miElemento");
touchElement.addEventListener("touchmove", function(event) {
console.log("El elemento está siendo movido por una acción táctil");
}); - 21touchend Evento touch Ocurre cuando uno o más dedos se levantan de la pantalla. Explicación: permite detectar cuando el usuario ha terminado de tocar un elemento específico y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const touchElement = document.getElementById("miElemento");
touchElement.addEventListener("touchend", function(event) {
console.log("El toque en el elemento ha finalizado");
}); - 22visibilitychange Evento de ventana Ocurre cuando la visibilidad de la página cambia (por ejemplo, cuando el usuario cambia a otra pestaña). Explicación: permite detectar cuándo cambia el estado de visibilidad de la página (por ejemplo, cuando el usuario cambia de pestaña o minimiza la ventana) y realizar una acción en respuesta a ese cambio, como registrar un mensaje en la consola.document.addEventListener("visibilitychange", function() {
if (document.visibilityState === "hidden") {
console.log("La página no está visible");
} else {
console.log("La página está visible");
}
}); - 23fullscreenchange Evento de Ventana Ocurre cuando se entra o se sale del modo de pantalla completa. Explicación: permite detectar cuándo el documento entra o sale del modo de pantalla completa y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.document.addEventListener("fullscreenchange", function() {
if (document.fullscreenElement) {
console.log("El documento está en modo pantalla completa");
} else {
console.log("El documento ha salido del modo pantalla completa");
}
}); - 24online / offline Evento de Ventana Ocurre cuando el navegador detecta un cambio en el estado de conexión a internet. Explicación: permite detectar cambios en el estado de la conexión a internet y realizar acciones en respuesta a esos cambios. Cuando la conexión a internet se restablece, se imprime un mensaje indicando que la conexión ha vuelto. Cuando se pierde la conexión, se imprime un mensaje indicando que la conexión se ha perdido.window.addEventListener("online", function(event) {
console.log("La conexión a internet ha sido restablecida");
});
window.addEventListener("offline", function(event) {
console.log("Se ha perdido la conexión a internet");
}); - 25focusin Evento de focus Ocurre cuando un elemento está a punto de recibir el foco, similar a focus. Explicación: permite detectar cuándo un elemento específico, o sus hijos, recibe el foco y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const inputElement = document.getElementById("miInput");
inputElement.addEventListener("focusin", function(event) {
console.log("El elemento ha recibido el foco (focusin)");
}); - 26focusout Evento de focus Similar a blur, pero ocurre antes de que el elemento pierda el foco. Explicación: permite detectar cuándo un elemento específico pierde el foco y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const inputElement = document.getElementById("miInput");
inputElement.addEventListener("focusout", function(event) {
console.log("El elemento ha perdido el foco (focusout)");
}); - 27play Evento multimedia Ocurre cuando se empieza a reproducir un video o audio. Explicación: permite detectar cuándo un elemento de audio o video comienza a reproducirse y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const mediaElement = document.getElementById("miMedia");
mediaElement.addEventListener("play", function(event) {
console.log("El elemento ha comenzado a reproducirse");
}); - 28pause Evento multimedia Ocurre cuando se pausa un video o audio. Explicación: permite detectar cuándo un elemento de audio o video ha sido pausado y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const mediaElement = document.getElementById("miMedia");
mediaElement.addEventListener("pause", function(event) {
console.log("El elemento ha sido pausado");
}); - 29ended Evento multimedia Ocurre cuando un video o audio ha terminado de reproducirse. Expliación: permite detectar cuándo un elemento de audio o video ha terminado de reproducirse y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const mediaElement = document.getElementById("miMedia");
mediaElement.addEventListener("ended", function(event) {
console.log("El elemento ha terminado de reproducirse");
}); - 30blur Evento de formulario Ocurre cuando un elemento pierde el foco. Explicación: permite detectar cuándo un elemento específico pierde el foco (es decir, cuando el usuario deja de interactuar con el elemento) y realizar una acción en respuesta a ese evento, como registrar un mensaje en la consola.const inputElement = document.getElementById("miInput");
inputElement.addEventListener("blur", function(event) {
console.log("El elemento ha perdido el foco");
});
Información
- Descripción
- Fichas sobre Sin título, creado por JUAN DIEGO GUZMAN ALDANA el 28/10/2024.
- Creado por
- JUAN DIEGO GUZMAN ALDANA
- Visitas
- 10
- Valoración