Flashcards
Eventos en JavaScript
Cards in this deck (39)
- 1Eventos en Js
- 2Adrian de Jesus Vite espinosa 4TIDSMAplicaciones Web Orientada a Servicios
Ing. Senen Aldahir Mayorga García
- 3Click Ocurre cuando el usuario hace clic en un elemento. Evento del ratónEjemplo:
element.addEventListener('click', function() {
console.log('Elemento clickeado');
});
//Al hacer clic, se muestra un mensaje en la consola. - 4Dblclick Se dispara al hacer doble clic en un elemento. Evento del ratónEjemplo:
element.addEventListener('dblclick', function() {
console.log('Doble clic en el elemento');
});
//Al hacer doble clic en el elemento, se imprime un mensaje en la consola. - 5Mousedown Ocurre cuando se presiona cualquier botón del ratón sobre un elemento. Evento del ratónEjemplo:
element.addEventListener('mousedown', function() {
console.log('Botón del ratón presionado');
});
//Muestra un mensaje en la consola cuando el botón del ratón es presionado. - 6Mouseup Se dispara cuando se suelta un botón del ratón sobre un elemento. Evento del ratónEjemplo:
element.addEventListener('mouseup', function() {
console.log('Botón del ratón soltado');
});
//El mensaje se muestra al soltar el botón del ratón. - 7Mousemove Se dispara continuamente mientras se mueve el ratón sobre un elemento. Evento del ratónEjmplo:
element.addEventListener('mousemove', function() {
console.log('Movimiento del ratón detectado');
});
//Se imprime un mensaje cada vez que se detecta movimiento del ratón. - 8mouseover Ocurre cuando el puntero del ratón entra en el área de un elemento. Evento del ratónEjemplo:
element.addEventListener('mouseover', function() {
console.log('Ratón sobre el elemento');
});
//Al pasar el ratón sobre el elemento, se muestra el mensaje. - 9mouseout Se dispara cuando el puntero del ratón sale del área de un elemento. Evento del ratónEjemplo:
element.addEventListener('mouseout', function() {
console.log('Ratón fuera del elemento');
});
//Al mover el ratón fuera del elemento, se imprime el mensaje. - 10contextmenu Ocurre cuando se hace clic derecho para abrir el menú contextual. Evento del ratónEjemplo:
element.addEventListener('contextmenu', function(event) {
event.preventDefault();
console.log('Menú contextual abierto');
});
//Se previene el menú contextual predeterminado y se muestra un mensaje en la consola. - 11keydown Ocurre cuando se presiona una tecla. Evento de TecladoEjemplo:
window.addEventListener('keydown', function(event) {
console.log('Tecla presionada: ' + event.key);
});
//Muestra la tecla presionada en la consola. - 12keyup Ocurre cuando se suelta una tecla. Evento de TecladoEjemplo:
window.addEventListener('keyup', function(event) {
console.log('Tecla soltada: ' + event.key);
});
//Imprime la tecla que se soltó. - 13submit Se dispara cuando un formulario es enviado. Evento de FormularioEjemplo:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Formulario enviado');
});
//Previne el envío del formulario y muestra un mensaje en la consola. - 14input Ocurre cuando un valor es cambiado en un campo de formulario. Evento de FormularioEjemplo:
inputElement.addEventListener('input', function() {
console.log('Valor modificado: ' + inputElement.value);
});
//Se imprime el valor del campo cada vez que es modificado. - 15focus Ocurre cuando un elemento recibe el foco. Evento de FormularioEjemplo
inputElement.addEventListener('focus', function() {
console.log('Campo enfocado');
});
//Se muestra un mensaje cuando el campo recibe el foco. - 16blur Ocurre cuando un elemento pierde el foco. Evento de FormularioEjemplo:
inputElement.addEventListener('blur', function() {
console.log('Campo desenfocado');
});
//Se muestra un mensaje cuando el campo pierde el foco. - 17change Se dispara cuando cambia el valor de un elemento y se pierde el foco. Evento de FormularioEjemplo:
selectElement.addEventListener('change', function() {
console.log('Valor seleccionado: ' + selectElement.value);
});
//Imprime el valor seleccionado de un elemento tipo cuando cambia. - 18reset Ocurre cuando un formulario es reseteado. Evento de FormularioEjemplo:
form.addEventListener('reset', function() {
console.log('Formulario reseteado');
});
//Muestra un mensaje cuando el formulario vuelve a sus valores iniciales. - 19DOMContentLoaded Ocurre cuando el HTML ha sido completamente cargado, sin esperar a que se carguen imágenes o estilos. Evento ComúnEjemplo:
document.addEventListener('DOMContentLoaded', function() {
console.log('HTML completamente cargado');
});
//Se ejecuta cuando el documento HTML está completamente cargado y parseado. - 20load Ocurre cuando la página completa (imágenes, estilos, etc.) ha cargado. Evento ComúnEjemplo:
window.addEventListener('load', function() {
console.log('Página completamente cargada');
});
//Se ejecuta cuando todos los recursos de la página han sido cargados. - 21resize Se dispara cuando la ventana del navegador cambia de tamaño. Evento ComúnEjemplo:
window.addEventListener('resize', function() {
console.log('Tamaño de la ventana cambiado');
});
//Muestra un mensaje cada vez que se redimensiona la ventana del navegador. - 22scroll Se dispara cuando se desplaza la barra de scroll en la página o en un elemento. Evento ComúnEjemplo:
window.addEventListener('scroll', function() {
console.log('Desplazamiento detectado');
});
//Imprime un mensaje cuando la página es desplazada. - 23dragstart Se dispara cuando se inicia el arrastre de un elemento. Evento de Drag & DropEjemplo:
element.addEventListener('dragstart', function() {
console.log('Arrastre iniciado');
});
//Muestra un mensaje cuando comienza a arrastrarse un elemento. - 24dragover Ocurre cuando un elemento arrastrado se encuentra sobre un objetivo de soltado. Evento de Drag & DropEjemplo:
target.addEventListener('dragover', function(event) {
event.preventDefault();
console.log('Elemento arrastrado sobre el objetivo');
});
//Permite que un elemento arrastrado se suelte sobre el objetivo. - 25drop Se dispara cuando el elemento arrastrado se suelta sobre un objetivo de soltado. Evento de Drag & DropEjemplo:
target.addEventListener('drop', function(event) {
event.preventDefault();
console.log('Elemento soltado');
});
//Muestra un mensaje cuando un elemento es soltado sobre el área de destino. - 26dragend Ocurre cuando se termina de arrastrar un elemento. Evento de Drag & DropEjemplo:
element.addEventListener('dragend', function() {
console.log('Arrastre finalizado');
});
//Imprime un mensaje cuando el proceso de arrastre de un elemento ha concluido. - 27play Se dispara cuando se empieza a reproducir un video o audio. Evento de MultimediaEjemplo:
video.addEventListener('play', function() {
console.log('Video en reproducción');
});
//Muestra un mensaje cuando el video comienza a reproducirse. - 28pause Ocurre cuando se pausa un video o audio. Evento de MultimediaEjemplo:
video.addEventListener('pause', function() {
console.log('Video pausado');
});
//Se muestra un mensaje cuando el video es pausado. - 29ended Ocurre cuando un video o audio ha terminado de reproducirse. Evento de MultimediaEjemplo:
video.addEventListener('ended', function() {
console.log('Reproducción finalizada');
});
//Muestra un mensaje cuando el video ha llegado al final. - 30copy Se dispara cuando el contenido es copiado al portapapeles. Evento del PortapapelesEjemplo:
document.addEventListener('copy', function() {
console.log('Contenido copiado');
});
//Muestra un mensaje cuando se corta contenido. - 31paste Ocurre cuando se pega contenido desde el portapapeles. Evento del PortapapelesEjemplo:
document.addEventListener('paste', function() {
console.log('Contenido pegado');
});
//Muestra un mensaje cuando se pega algo en la página. - 32focusin Ocurre cuando un elemento está a punto de recibir el foco. Similar a focus, pero se propaga. Evento de FocusEjemplo:
inputElement.addEventListener('focusin', function() {
console.log('Elemento está recibiendo el foco');
});
//Muestra un mensaje cuando el elemento comienza a recibir el foco. - 33focusout Ocurre cuando un elemento está a punto de perder el foco. Similar a blur, pero se propaga. Evento de FocusEjemplo:
inputElement.addEventListener('focusout', function() {
console.log('Elemento está perdiendo el foco');
});
//Muestra un mensaje cuando el elemento está perdiendo el foco. - 34touchstart Ocurre cuando uno o más dedos tocan la pantalla. Evento de TouchEjemplo:
element.addEventListener('touchstart', function() {
console.log('Pantalla tocada');
});
//Se muestra un mensaje cuando el usuario toca la pantalla. - 35touchmove Ocurre cuando se mueve el dedo por la pantalla. Eventos de TouchEjemplo:
element.addEventListener('touchmove', function() {
console.log('Movimiento del dedo detectado');
});
//Muestra un mensaje cada vez que un dedo se mueve sobre la pantalla. - 36touchend Ocurre cuando uno o más dedos se levantan de la pantalla. Eventos de TouchEjemplo:
element.addEventListener('touchend', function() {
console.log('Dedo levantado de la pantalla');
});
//Muestra un mensaje cuando el usuario deja de tocar la pantalla. - 37visibilitychange Ocurre cuando la visibilidad de la página cambia (por ejemplo, cuando el usuario cambia de pestaña). Evento de VentanaEjemplo:
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
console.log('Página no visible');
} else {
console.log('Página visible');
}
});
//Muestra un mensaje dependiendo de si la página está visible o no. - 38fullscreenchange Ocurre cuando se entra o se sale del modo de pantalla completa. Evento de VentanaEjemplo:
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
console.log('Página en modo pantalla completa');
} else {
console.log('Página salió de pantalla completa');
}
});
//Indica cuando la página entra o sale del modo de pantalla completa. - 39online / offline Ocurre cuando el navegador detecta un cambio en el estado de conexión a internet. Evento de VentanaEjemplo:
window.addEventListener('online', function() {
console.log('Conexión a internet restaurada');
});
window.addEventListener('offline', function() {
console.log('Conexión a internet perdida');
});
//Muestra un mensaje cuando se pierde o se restaura la conexión a internet.
Information
- Description
- En estas fichas se muestra una lista de diferentes tipos de eventos que se usan en JavaScript para proporcionar una mejor funcionalidad dentro del entorno Web.
- Created by
- Vite Espinosa Adrian de Jesus
- Views
- 13
- Rating