Guiavascript-Eventos Móviles

Eventos Móviles

Nota

Los eventos móviles son eventos que se producen en dispositivos móviles, como teléfonos inteligentes y tabletas. Estos eventos pueden ser causados por acciones del usuario, como tocar, deslizar o girar, o por cambios en el estado del dispositivo, como cambiar la orientación o la orientación.

Para poder probar los eventos es necesario que uses el modo responsive de las devtools o accedas desde tu teléfono.

Eventos del mouse

Evento toque

Podemos agregar un evento para que escuche cuando se toque la pantalla. Usando el el evento "touchstart"

<!--HTML-->
<p id='touch'>Toca la pantalla</p>

const p = document.querySelector("#touch");
const change = () => (p.innerText = "Toque de pantalla 😵‍💫");
touch.addEventListener("touchstart", change);;

Evento touchmove

Podemos agregar un evento para que escuche cuando se mueve el dedo en la pantalla. Usando el el evento "touchmove"

<!--HTML-->
<section class="flex center f-col br-secondary" id="w"><p id='tmove'>Desliza el dedo sobre la sección</p></section>

const w = document.querySelector("#w");
const p = document.querySelector("#tmove");
const change = () => (p.innerText = "Deslizado");
w.addEventListener("touchmove", change);

Evento Giroscopio

Podemos agregar un evento para que escuche cuando se mueve el dispositivo. Usando el el evento "deviceorientation"

<!--HTML-->
<section class="flex center f-col br-secondary" id="giros">Gira el dispositivo y observa el color de fondo</section>

const sec = document.querySelector("#giros");
const change = () => {
// Color temporal al girar
sec.style.backgroundColor = "#182f4a";
// Volver al color original tras 2 segundo
setTimeout(() => {
sec.style.backgroundColor = "#2d2d2d";
},2000);
};
window.addEventListener("deviceorientation", change);

Atrás