Flashcards
Fichas sobre Eventos en JS
Cards in this deck (32)
- 1CLICK Tipo: Evento de Ratón Descripción: Se dispara cuando el usuario hace clic en un elementoEjemplo:
document.getElementById('miBoton').addEventListener('click', function() {
console.log('¡Botón clicado!');
});
Explicación:
Cuando el usuario hace clic en el botón con id miBoton, se activa el evento click, lo que ejecuta la función que imprime el mensaje en la consola. Esto te permite ejecutar cualquier código que necesites cuando el botón es clicado. - 2DBLCLICK Tipo: Evento de Ratón Descripción: Se dispara al hacer doble clic en un elemento.Ejemplo:
document.getElementById('miParrafo').addEventListener('dblclick', function() {
this.style.backgroundColor = 'lightblue'; // Cambia el color de fondo
console.log('¡Doble clic realizado!');
});
Explicación:
Cuando el usuario hace doble clic en el párrafo con id miParrafo, se activa el evento dblclick, lo que desencadena la función que cambia el color de fondo del párrafo a lightblue y muestra un mensaje en la consola. - 3MOUSEOVER Tipo: Evento de Ratón Descripción: Se dispara cuando el puntero del ratón entra en el área de un elemento.Ejemplo:
const boton = document.getElementById('miBoton');
boton.addEventListener('mouseover', function() {
this.style.backgroundColor = 'lightblue'; // Cambia el color de fondo
});
boton.addEventListener('mouseout', function() {
this.style.backgroundColor = '#007BFF'; // Restaura el color original
});
Explicación:
Cuando pasas el mouse sobre el botón, se activa el evento mouseover, cambiando su color de fondo a lightblue.
Cuando el mouse sale del botón, se activa el evento mouseout, restaurando su color original.
La transición suave es posible gracias a la propiedad CSS transition, que mejora la experiencia visual. - 4MOUSEOUT Tipo: Evento de Ratón Descripción: Se dispara cuando el puntero del ratón sale del área de un elemento.Ejemplo:
const parrafo = document.getElementById('miParrafo'); parrafo.addEventListener('mouseover', () => {
parrafo.style.color = 'blue';
});
parrafo.addEventListener('mouseout', () => {
parrafo.style.color = 'black';
});
Explicación:
Cuando el usuario pasa el mouse sobre el párrafo, el evento mouseover cambia el color del texto a azul.
Cuando el mouse sale del área del párrafo, el evento mouseout restaura el color del texto a negro. - 5MOUSEDOWN Tipo: Evento de Ratón Descripción: Ocurre cuando se presiona un botón del ratón sobre un elemento.Ejemplo:
const boton = document.getElementById('miBoton');
boton.addEventListener('mousedown', () => {
boton.style.backgroundColor = 'orange';
});
boton.addEventListener('mouseup', () => {
boton.style.backgroundColor = '#007BFF';
Explicación:
Cuando el usuario presiona el botón (mousedown), el color de fondo cambia a orange, proporcionando una señal visual de que el botón ha sido presionado.
Cuando el usuario suelta el botón (mouseup), el color de fondo vuelve al original (#007BFF), indicando que la acción ha terminado. - 6MOUSEUP Tipo: Evento de Ratón Descripción: Ocurre cuando se suelta un botón del ratón sobre un elemento.Ejemplo:
const parrafo = document.getElementById('miParrafo');
parrafo.addEventListener('mouseup', () => {
parrafo.style.color = 'red';
});
Explicación:
Cuando el usuario suelta el botón del mouse sobre el párrafo, el color del texto cambia a rojo. Esto proporciona una señal visual de que ha ocurrido una acción (soltar el mouse). - 7MOUSEMOVE Tipo: Evento de Ratón Descripción: Se dispara continuamente mientras el ratón se mueve sobre un elemento.Ejemplo:
const area = document.getElementById('area');
area.addEventListener('mousemove', () => {
area.style.backgroundColor = 'lightblue';
});
Explicación:
Cada vez que el usuario mueve el mouse dentro del área del div, el color de fondo cambia a lightblue, lo que proporciona una respuesta visual inmediata. - 8CONTEXTMENU Tipo: Evento de Ratón Descripción: Ocurre cuando se hace clic derecho para abrir el menú contextual.Ejemplo:
const parrafo = document.getElementById('miParrafo');
parrafo.addEventListener('contextmenu', (event) => {
event.preventDefault();
alert('¡Menú contextual personalizado!');
});
Explicación:
Al hacer clic derecho sobre el párrafo, se evita que aparezca el menú contextual estándar y se muestra un mensaje personalizado. - 9KEYDOWN Tipo: Evento de Teclado Descripción: Ocurre cuando se presiona una tecla.Ejemplo:
const input = document.getElementById('miInput');
input.addEventListener('keydown', (event) => {
console.log(`Has presionado la tecla: ${event.key}`);
});
Explicación:
Cada vez que el usuario presiona una tecla mientras está en el campo de entrada, se registra el nombre de la tecla en la consola - 10KEYUP Tipo: Evento de Teclado Descripción: Ocurre cuando se suelta una tecla.Ejemplo:
const input = document.getElementById('miInput');
input.addEventListener('keyup', (event) => {
console.log(`Has soltado la tecla: ${event.key}`);
});
Explicación:
Cada vez que el usuario suelta una tecla mientras está en el campo de entrada, se registra el nombre de la tecla en la consola - 11SUBMIT Tipo: Evento de Formulario Descripción: Se dispara cuando un formulario es enviado.Ejemplo:
const formulario = document.getElementById('miFormulario')
formulario.addEventListener('submit', (event) => {
event.preventDefault(); // Evita que el formulario se envíe y la página se recargue
console.log('Formulario enviado');
});
Explicación:
Al enviar el formulario, se evita que la página se recargue y se muestra un mensaje en la consola. - 12INPUT Tipo: Evento de Formulario Descripción: Ocurre cuando un valor es cambiado en un campo de formulario.Ejemplo:
const input = document.getElementById('miInput');
const texto = document.getElementById('miTexto');
input.addEventListener('input', () => {
texto.textContent = input.value;
});
Explicación:
A medida que el usuario escribe en el campo de entrada, el párrafo se actualiza para mostrar el texto actual. - 13FOCUS Tipo: Evento de Formulario Descripción: Ocurre cuando un elemento (campo de texto) recibe el foco.Ejemplo:
const input = document.getElementById('miInput');
const texto = document.getElementById('miTexto');
input.addEventListener('focus', () => {
texto.textContent = 'El campo tiene foco.';
});
Explicación:
Cuando el usuario hace clic en el campo de entrada, se muestra un mensaje en el párrafo y el borde del campo cambia de color. - 14CHANGE Tipo: Evento de Formulario Descripción: Se dispara cuando cambia el valor de un elemento y se pierde el foco.Ejemplo:
const select = document.getElementById('miSelect');
const texto = document.getElementById('miTexto');
select.addEventListener('change', () => {
texto.textContent = 'Has seleccionado: ' + select.value;
Explicación:
Cuando el usuario selecciona una opción del menú desplegable, el párrafo se actualiza para mostrar la opción elegida.
}); - 15RESET Tipo: Evento de Formulario Descripción: Ocurre cuando un formulario es reseteado.Ejemplo:
const formulario = document.getElementById('miFormulario');
formulario.addEventListener('reset', () => {
console.log('El formulario ha sido restablecido');
});
Explicación:
Al hacer clic en el botón de "restablecer", el formulario se vacía y se restablece, y se muestra un mensaje en la consola. - 16DOMContentLoaded Tipo: Evento Común Descripción: Ocurre cuando el HTML ha sido completamente cargado.Ejemplo:
document.addEventListener('DOMContentLoaded', () => {
console.log('El DOM está completamente cargado y listo para ser manipulado.');
document.getElementById('titulo');
titulo.style.color = 'green';
});
Explicación:
Cuando el DOM está completamente cargado, se muestra un mensaje en la consola y se cambia el color del título. - 17LOAD Tipo: Evento Común Descripción: Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado.Ejemplo:
window.addEventListener('load', () => {
console.log('La página y todos sus recursos han sido cargados.');
alert('¡La página está completamente cargada!');
});
Explicación:
Cuando la página y todos sus recursos (como imágenes) están completamente cargados, se muestra un mensaje en la consola y una alerta al usuario. - 18DRAGSTART Tipo: Evento de Drag y Drop Descripción: Se dispara cuando se inicia el arrastre de un elemento.Ejemplo:
const elemento = document.getElementById('miElemento');
elemento.addEventListener('dragstart',(event) => {
console.log('¡Arrastre iniciado!');event.dataTransfer.setData('text/plain', 'Este texto se arrastra');
});
Explicación:
Cuando el usuario comienza a arrastrar el elemento, se muestra un mensaje en la consola y se pueden establecer datos para el arrastre. - 19DRAGOVER Tipo: Evento de Drag y Drop Descripción: Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado.Ejemplo:
const areaDestino = document.getElementById('areaDestino'); areaDestino.addEventListener('dragover', (event) => {
event.preventDefault(); areaDestino.style.backgroundColor = 'lightgreen';
});
areaDestino.addEventListener('drop', () => {
console.log('¡Elemento soltado!');areaDestino.style.backgroundColor = '';
});
Explicación:
Este código permite que un elemento arrastrado se suelte en un área específica de la página. Al arrastrar el elemento sobre el área de destino, se cambia su color de fondo para indicar que es un lugar válido para soltar. - 20DROP Tipo: Evento de Drag y Drop Descripción: Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado.Ejemplo:
const areaDestino = document.getElementById('areaDestino');
areaDestino.addEventListener('dragover', (event) => {
event.preventDefault();
});
areaDestino.addEventListener('drop', (event) => {
event.preventDefault();
areaDestino.textContent = '¡Elemento soltado!';
});
Explicación:
Este ejemplo muestra cómo utilizar el evento drop para cambiar el contenido de un área cuando se suelta un elemento en ella. - 21DRAGEND Tipo: Evento de Drag y Drop Descripción: Ocurre cuando se termina de arrastrar un elemento.Ejemplo:
const elemento = document.getElementById('miElemento');
elemento.addEventListener('dragend', () => {
console.log('¡Arrastre finalizado!');
elemento.style.opacity = '0.5';
});
Explicación:
Este ejemplo muestra cómo utilizar el evento dragend para ejecutar una acción (como cambiar la opacidad) cuando se termina el arrastre de un elemento. - 22PLAY Tipo: Evento Multimedia Descripción: Ocurre cuando se empieza a reproducir un video o audio.Ejemplo:
const video = document.getElementById('miVideo');
video.addEventListener('play', () => {
console.log('El video está reproduciéndose.');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento play para detectar cuándo un video comienza a reproducirse. - 23PAUSE Tipo: Evento Multimedia Descripción: Ocurre cuando se pausa un video o audio.Ejemplo:
const video = document.getElementById('miVideo');
video.addEventListener('pause', () => {
console.log('El video ha sido pausado.');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento pause para detectar cuándo un video se detiene. - 24ENDED Tipo: Evento Multimedia Descripción: 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 de reproducirse.');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento ended para detectar cuándo un video ha finalizado su reproducción. - 25COPY Tipo: Evento del Portapapeles Descripción: Se dispara cuando el contenido es copiado al portapapeles.Ejemplo:
const parrafo = document.getElementById('miParrafo');
parrafo.addEventListener('copy', () => {
console.log('¡Texto copiado!');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento copy para detectar cuándo se copia texto de un elemento. - 26CUT Tipo: Evento del Portapapeles Descripción: Ocurre cuando el contenido es cortado al portapapeles.Ejemplo:
const parrafo = document.getElementById('miParrafo');
parrafo.addEventListener('cut', () => {
console.log('¡Texto cortado!');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento cut para detectar cuándo se corta texto de un elemento. - 27PASTE Tipo: Evento del Portapapeles Descripción: Ocurre cuando se pega contenido desde el portapapeles.Ejemplo:
const textarea = document.getElementById('miTextarea');
textarea.addEventListener('paste', () => {
console.log('¡Texto pegado!');
});
Explicación:
Este ejemplo muestra cómo utilizar el evento paste para detectar cuándo se pega texto en un elemento. - 28TOUCHSTART Tipo: Evento Touch Descripción: Ocurre cuando uno o más dedos tocan la pantalla.Ejemplo:
const area = document.getElementById('miArea');
area.addEventListener('touchstart', () => {
area.style.backgroundColor = 'lightgreen';
console.log('¡Tocado!');
});
Explicación:
Cuando el área es tocada, cambia su color de fondo a verde claro y se imprime un mensaje en la consola. - 29TOUCHMOVE Tipo: Evento Touch Descripción: Ocurre cuando se mueve el dedo por la pantalla.Ejemplo:
const area = document.getElementById('miArea');
area.addEventListener('touchmove', (event) => {
event.preventDefault();
area.style.backgroundColor = 'lightgreen';
console.log('¡Deslizando!');
});
Explicación:
Cuando el área se desliza, cambia su color de fondo a verde claro, se previene el desplazamiento de la página y se imprime un mensaje en la consola. - 30TOUCHEND Tipo: Evento Touch Descripción: Ocurre cuando uno o más dedos se levantan de la pantalla.Ejemplo:
const area = document.getElementById('miArea');
area.addEventListener('touchend', () => {
area.style.backgroundColor = 'lightblue';
console.log('¡Tacto finalizado!');
});
Explicación:
Cuando el usuario levanta el dedo, cambia el color de fondo a azul claro y se imprime un mensaje en la consola. - 31VISIBILITYCHANGE Tipo: Evento de Ventana Descripción: Ocurre cuando la visibilidad de la página cambia (por ejemplo, cuando el usuario cambia a otra pestaña).Ejemplo:
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
console.log('La página está visible.');
} else {
console.log('La página está oculta.');
}
});
Explicación:
Se verifica si la página está visible o oculta. Se imprime un mensaje en la consola según el estado de visibilidad. - 32ONLINE / OFFLINE Tipo: Evento de Ventana Descripción: Ocurre cuando el navegador detecta un cambio en el estado de conexión a internet.Ejemplo:
const estado = document.getElementById('estado');
window.addEventListener('online', () => {
estado.textContent = 'Estado de conexión: Conectado';
console.log('¡Conectado a la red!');
});
window.addEventListener('offline', () => {
estado.textContent = 'Estado de conexión: Desconectado';
console.log('¡Desconectado de la red!');
});
Explicación:
Cuando el navegador se conecta a la red, se actualiza el texto y se imprime un mensaje en la consola y cuando el navegador se desconecta, también se actualiza el texto y se imprime igual mensaje en la consola.
Information
- Description
- fichas tecnicas con contenido de nombre, tipo, descripción y ejemplo sobre los distintos eventos de JavaScript
- Created by
- Ivan Maya cordero
- Views
- 22
- Rating