Karteikarten
Eventos en JS
Karten in diesem Stapel (31)
- 1CLICK-Evento de Ratón Se dispara cuando el usuario hace clic en un elemento. EXPLICACIÓN: Este tipo de código es útil para agregar interactividad en páginas web, ya que permite reaccionar a eventos específicos, como un clic del usuario.Ejemplo:
document.querySelector("#miElemento").addEventListener("click", function() {
console.log("El elemento ha sido clicado.");
}); - 2DBLCLICK- Evento de Ratón Se dispara al hacer doble clic en un elemento. EXPLICACIÓN: Este código es útil para agregar una acción específica que se active solo con un doble clic, como iniciar una función especial o cambiar el estado del elemento.Ejemplo:
document.querySelector("#miElemento").addEventListener("dblclick", function() {
console.log("Se hizo doble clic en el elemento.");
}); - 3MOUSEOVER - Evento de Ratón Se dispara cuando el puntero del ratón entra en el área de un elemento. EXPLICACIÓN: Este código permite detectar cuándo el usuario pasa el puntero sobre un elemento, útil para crear efectos de resaltado o mostrar información adicional.Ejemplo:
document.querySelector("#miElemento").addEventListener("mouseover", function() {
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: Este código es útil para detectar cuándo el puntero deja de estar sobre un elemento, como para ocultar información adicional o desactivar un efecto visual.Ejemplo:
document.querySelector("#miElemento").addEventListener("mouseout", function() {
console.log("El ratón ha salido del área del elemento.");
}); - 5MOUSEDOWN -Evento de Ratón Ocurre cuando se presiona un botón del ratón sobre un elemento. EXPLICACIÓN: Este código es útil para detectar la acción inicial de presionar un botón del ratón, lo que puede servir para iniciar una acción de arrastre o resaltar el elemento.Ejemplo:
document.querySelector("#miElemento").addEventListener("mousedown", function() {
console.log("Se ha presionado un botón del ratón en el elemento.");
}); - 6MOUSEUP - Evento de Ratón Ocurre cuando se suelta un botón del ratón sobre un elemento. EXPLICACIÓN: Este código es útil para detectar el momento en que el usuario deja de presionar el botón del ratón, lo cual puede ser útil para finalizar acciones de arrastre o confirmar una selección.Ejemplo:
document.querySelector("#miElemento").addEventListener("mouseup", function() {
console.log("Se ha soltado un botón del ratón en el elemento.");
}); - 7MOUSEMOVE - Evento de Ratón Se dispara continuamente mientras el ratón se mueve sobre un elemento. EXPLICACIÓN: Este código es útil para realizar un seguimiento continuo de la posición del ratón, ideal para efectos visuales en tiempo real, como resaltar el área o mostrar coordenadas.Ejemplo:
document.querySelector("#miElemento").addEventListener("mousemove", function() {
console.log("El ratón se está moviendo sobre el elemento.");
}); - 8CONTEXTMENU - Evento de Ratón Ocurre cuando se hace clic derecho para abrir el menú contextual. EXPLICACIÓN: Este código es útil para personalizar la acción del clic derecho, como mostrar un menú contextual personalizado o iniciar una acción específica.Ejemplo:
document.querySelector("#miElemento").addEventListener("contextmenu", function(event) {
event.preventDefault(); // Previene que se abra el menú contextual por defecto
console.log("Se ha hecho clic derecho en el elemento.");
}); - 9KEYDOWN - Eventos de Teclado Ocurre cuando se presiona una tecla. EXPLICACIÓN: Este código es útil para detectar y responder a la entrada del teclado, como para controlar un formulario o realizar acciones en un juego con base en las teclas presionadas.Ejemplo:
document.addEventListener("keydown", function(event) {
console.log("Tecla presionada: " + event.key);
}); - 10KEYUP - Eventos de Teclado. Ocurre cuando se suelta una tecla. EXPLICACIÓN: Este código es útil para detectar el momento en que el usuario deja de presionar una tecla, permitiendo realizar acciones posteriores, como finalizar un movimiento en un juego o registrar la última tecla ingresada.Ejemplo:
document.addEventListener("keyup", function(event) {
console.log("Tecla soltada: " + event.key);
}); - 11SUBMIT - Eventos de Formulario Se dispara cuando un formulario es enviado. EXPLICACIÓN: Este código es útil para validar datos antes de enviar el formulario o para manejar el envío con AJAX, evitando la recarga de la página.Ejemplo:
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault(); // Evita que el formulario se envíe
console.log('Formulario enviado');
}); - 12INPUT - Eventos de Formulario Ocurre cuando un valor es cambiado en un campo de formulario. EXPLICACIÓN: Este código es útil para responder inmediatamente a los cambios en un campo de entrada, como en la validación en tiempo real o en la actualización de otros elementos en la página basados en la entrada del usuario.Ejemplo:
document.querySelector('input').addEventListener('input', (event) => {
console.log(`Valor cambiado: ${event.target.value}`);
}); - 13focus: Ocurre cuando un elemento (campo de texto) recibe el foco. blur: Ocurre cuando un elemento pierde el foco. EXPLICACIÓN: Este código es útil para manejar el comportamiento del usuario al interactuar con campos de texto, permitiendo, por ejemplo, validar el contenido al salir del campo o proporcionar indicaciones visuales cuando un campo está activo.Ejemplo:
const inputElement = document.querySelector('input');
inputElement.addEventListener('focus', () => {
console.log('Campo de texto enfocado');
});
inputElement.addEventListener('blur', () => {
console.log('Campo de texto desenfocado');
}); - 14CHANGE - Evento de Formulario Se dispara cuando cambia el valor de un elemento y se pierde el foco. EXPLICACIÓN: Este código es útil para responder a cambios en un menú desplegable, permitiendo actualizar otras partes de la interfaz de usuario o realizar acciones específicas basadas en la opción seleccionada.Ejemplo:
document.querySelector('select').addEventListener('change', (event) => {
console.log(`Valor seleccionado: ${event.target.value}`);
}); - 15RESET - Evento de Formulario Ocurre cuando un formulario es reseteado. EXPLICACIÓN: Este código es útil para realizar un seguimiento de cuando un formulario es reiniciado, lo que puede ser útil para limpiar cualquier estado relacionado o para proporcionar retroalimentación al usuario.Ejemplo:
document.querySelector('form').addEventListener('reset', () => {
console.log('Formulario reseteado');
}); - 16DOMContentLoaded - Eventos Comunes Ocurre cuando el HTML ha sido completamente cargado. EXPLICACIÓN: Este código es útil para ejecutar scripts que dependen de la estructura del DOM ya cargada, asegurando que los elementos estén disponibles para su manipulación antes de ejecutar cualquier lógica adicional.Ejemplo:
document.addEventListener('DOMContentLoaded', () => {
console.log('HTML completamente cargado');
}); - 17load - Eventos Comunes Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado. EXPLICACIÓN: Este código es útil para ejecutar scripts que dependen de que todos los recursos de la página estén disponibles, lo que puede incluir la inicialización de componentes que requieren imágenes o estilos completos antes de ser presentados al usuario.Ejemplo:
window.addEventListener('load', () => {
console.log('Página completamente cargada');
}); - 18resize - Eventos Comunes Ocurre cuando la ventana del navegador cambia de tamaño. EXPLICACIÓN: Este código es útil para detectar y responder a cambios en el tamaño de la ventana, lo que puede ser necesario para ajustar el diseño o realizar otras acciones dinámicas en función del espacio disponible en la pantalla.Ejemplo:
window.addEventListener('resize', () => {
console.log('Ventana cambiada de tamaño');
}); - 19scroll - Eventos comunes Ocurre cuando se desplaza la barra de scroll en la página o en un elemento con scroll. EXPLICACIÓN: Este código es útil para detectar el desplazamiento del usuario en la página, lo que puede ser aprovechado para realizar acciones como cargar contenido adicional, cambiar la apariencia de elementos al hacer scroll, o registrar el comportamiento del usuario en la página.Ejemplo:
window.addEventListener('scroll', () => {
console.log('Se ha desplazado la barra de scroll');
}); - 20dragstart - Eventos de Drag & Drop Se dispara cuando se inicia el arrastre de un elemento. EXPLICACIÓN: Este código es útil para gestionar la interacción del usuario con elementos que pueden ser arrastrados, permitiendo iniciar otras acciones o cambios visuales cuando el arrastre comienza.Ejemplo:
document.querySelector('.draggable').addEventListener('dragstart', (event) => {
console.log('Iniciado el arrastre');
}); - 21dragover - Eventos de Drag & Drop Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado. EXPLICACIÓN: Este código es útil para gestionar la interacción del usuario durante el proceso de arrastrar y soltar, proporcionando feedback visual o funcional mientras el usuario mueve un elemento sobre un área designada para soltar.Ejemplo:
document.querySelector('.dropzone').addEventListener('dragover', (event) => {
event.preventDefault(); // Necesario para permitir el drop
console.log('Elemento arrastrado sobre el objetivo');
}); - 22drop - Eventos de Drag & Drop Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado. EXPLICACIÓN: Este código es útil para manejar la finalización del proceso de arrastre y soltar, permitiendo realizar acciones como mover elementos en la interfaz, registrar el evento, o proporcionar retroalimentación visual al usuario tras soltar el elemento.Ejemplo:
document.querySelector('.dropzone').addEventListener('drop', (event) => {
event.preventDefault();
console.log('Elemento soltado en el objetivo');
}); - 23dragend - Eventos de Drag & Drop: Ocurre cuando se termina de arrastrar un elemento. EXPLICACIÓN: Este código es útil para gestionar la finalización del proceso de arrastre, permitiendo realizar acciones como limpiar estados, actualizar la interfaz de usuario o registrar información sobre la operación de arrastre.Ejemplo:
document.querySelector('.draggable').addEventListener('dragend', () => {
console.log('Arrastre terminado');
}); - 24play Eventos de Multimedia Ocurre cuando se empieza a reproducir un video o audio.. EXPLICACIÓN: Este código es útil para detectar el momento en que el video comienza a reproducirse, lo que puede permitir realizar acciones adicionales, como actualizar estadísticas, mostrar mensajes o realizar ajustes en la interfaz de usuario relacionadas con la reproducción del video.Ejemplo:
document.querySelector('video').addEventListener('play', () => {
console.log('Reproducción iniciada');
}); - 25pause - Eventos de Multimedia Ocurre cuando se pausa un video o audio. EXPLICACIÓN: Este código es útil para detectar el momento en que el video es pausado, lo que permite realizar acciones adicionales, como actualizar la interfaz de usuario, guardar el estado de reproducción o enviar estadísticas sobre el comportamiento del usuario.Ejemplo:
document.querySelector('video').addEventListener('pause', () => {
console.log('Reproducción pausada');
}); - 26ended - Eventos de multimedia Ocurre cuando un video o audio ha terminado de reproducirse. EXPLICACIÓN: Este código es útil para detectar el momento en que el video termina de reproducirse, lo que puede permitir realizar acciones adicionales, como mostrar un mensaje, reiniciar el video, cargar contenido relacionado, o actualizar estadísticas de visualización.Ejemplo: document.querySelector('video').addEventListener('ended', () => {
console.log('Reproducción finalizada');
}); - 27copy Eventos de portapapeles Se dispara cuando el contenido es copiado al portapapeles. EXPLICACIÓN: Este código es útil para realizar un seguimiento de las acciones del usuario relacionadas con el copiado de contenido, lo que puede permitir realizar acciones adicionales, como registrar la actividad, mostrar mensajes de confirmación, o incluso modificar el contenido que se está copiando.Ejemplo:
document.addEventListener('copy', () => {
console.log('Contenido copiado al portapapeles');
}); - 28cut Eventos de portapapeles Ocurre cuando el contenido es cortado al portapapeles EXPLICACIÓN; Este código es útil para monitorear la acción de cortar contenido, permitiendo realizar acciones adicionales, como registrar la actividad, actualizar el estado de la interfaz, o proporcionar retroalimentación visual al usuario.Ejemplo:
document.addEventListener('cut', () => {
console.log('Contenido cortado al portapapeles');
}); - 29paste Eventos de portapapeles Ocurre cuando se pega contenido desde el portapapeles. EXPLICACIÓN: Este código es útil para detectar y gestionar la acción de pegar contenido, permitiendo realizar acciones adicionales como validar el contenido pegado, registrar la actividad o proporcionar retroalimentación visual al usuario.Ejemplo:
document.addEventListener('paste', () => {
console.log('Contenido pegado desde el portapapeles');
}); - 30focusin - Eventos de focus Ocurre cuando un elemento está a punto de recibir el foco, similar a focus. EXPLICACIÓN: Este código es útil para monitorear el cambio de foco entre elementos en la página, lo cual puede permitir actualizaciones dinámicas en la interfaz de usuario o realizar acciones adicionales en función del elemento que recibe el foco.Ejemplo:
document.addEventListener('focusin', (event) => {
console.log('Elemento a punto de recibir el foco:', event.target);
}); - 31focusout Eventos de focus Similar a blur, pero ocurre antes de que el elemento pierda el foco. EXPLICACIÓN: Este código es útil para monitorear la pérdida de foco entre elementos en la página, lo cual permite realizar acciones adicionales como validaciones, guardar cambios o actualizar la interfaz de usuario cuando un elemento pierde el foco.Ejemplo: document.addEventListener('focusout', (event) => {
console.log('Elemento a punto de perder el foco:', event.target);
});
Informationen
- Beschreibung
- Descripción de cada uno de los eventos en JAVASCRIPT, incluye ejemplos y descripción de ellos.
- Erstellt von
- MERYL YAMILETH SOLIS HERNANDEZ
- Aufrufe
- 6
- Bewertung