Javascript mouseup, mousedown, mousemove, touchstart, touchend, touchmove

web의 event에는 mouse동작과 touch 동작에 따른 이벤트를 제어할 수 있습니다.

매번 click, submit만 다루었었어서 swiper의 동작은 어떻게 구현하나 싶었는데 이번기회에 힌트를 찾은것 같습니다.

이미 제공하는 수많은 event들이 있고 이것들을 이용하면 더 나은 서비스를 구현할 수 있을것 같네요.

요번에 알아볼 이벤트는 6개의 이벤트 입니다.

이 6개의 이벤트를 구현해서 간단한 예제 한번 구현하였습니다.

 

스파이더맨을 드래그 할 수 있고 이 드래그가 종료되면 거미줄을 쏩니다.

나중에는 좀 더 디벨롭 시켜서 삼스파가 나오게 해야겠네요

 

const dragBox = document.querySelector(".drag-box")

dragBox.addEventListener("mousedown", () => console.log("mousedown"))
dragBox.addEventListener("mouseup", () => console.log("mouseup"))
dragBox.addEventListener("mousemove", () => console.log("mousemove"))

dragBox.addEventListener("touchstart", () => console.log("touchstart"))
dragBox.addEventListener("touchend", () => console.log("touchend"))
dragBox.addEventListener("touchmove", () => console.log("touchmove"))

위의 코드는 제목의 6가지 메소드를 전부 사용하는 간단한 예시입니다.

우리가 흔히 쓰는 click, submit과 사용 방법은 같습니다.

 

mousedown

mousedown은 mouse가 눌렸을때  이벤트가 실행됩니다.

mouseup

mouseup은 mouse를 떼었을때 이벤트가 실행됩니다.

mousemove

mousemove는 누른 상태에서 커서를 움직이면 이벤트가 실행됩니다.

 

요즘엔 모바일의 사용량이 압도적이므로 무조건 모바일 환경을 고려하여야 합니다.

하지만 위의 mouse관련 이벤트는 모바일에서는 동작하지 않습니다.

그래서 아래의 touch 관련 이벤트를 통해 웹에서의 동작을 구현하여야 합니다.

 

touchstart

touchstart는 mousedown의 모바일 버전이라고 생각하면 됩니다.

touchend

touchend는 mouseup의 모바일 버전이라고 생각하면 됩니다.

touchmove

touchmove는 mousemove의 모바일 버전이라고 생각하면 됩니다.

 

 

touch 관련 이벤트는 웹에서는 동작하지 않습니다.

touch 관련 이벤트를 웹에서 확인하려면 크롬의 개발자 도구를 이용하여 모바일 버전에서 확인하여야 합니다.

개발자 도구를 띄워둔 상태에서 ctrl + shift + m 을 누르면 쉽게 버전을 toggle 할 수 있습니다.

 

이벤트의 정의에 대한 설명은 간단해서 

이벤트를 실제로 사용하는 예시를 보는게 좋을것 같습니다.

아래는 예제 영상에 나오는 구현 코드 입니다.

 

const spider = document.querySelector(".spider")
const spiderWeb = document.querySelector('.spider-web')

const screen = { x: window.screen.width, y: window.screen.height }
const initialPointer = { x: 0, y: 0 }
// 이동할 거리
const offset = { x: 0, y: 0 }

const spiderMoveHandler = (e) => {
  // clientX,Y 는 viewport를 기준으로 x,y 위치를 반환함
  // 모바일에서는 touches를 통해 커서의 위치를 가져올 수 있다.
  const cursorX = e.clientX || e.touches[0].clientX;
  const cursorY = e.clientY || e.touches[0].clientY;

  offset.x = cursorX - initialPointer.x;
  offset.y = cursorY - initialPointer.y;

  // left가 x, top이 y
  // transform은 gpu를 이용하므로 absolute를 통해 top, left를 바꾸어 주는것보다 빠름, left, top은 레이아웃에 영향을 줄 수 있음
  spider.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
};

const shootWeb = () => {
  spiderWeb.style.transform = `translateX(${screen.x * 1.5}px)`;
  spiderWeb.style.transition = `1s`;
}

const initialWeb = () => {
  spiderWeb.style.transform = 'none';
  spiderWeb.style.transition = 'none';
}

spider.addEventListener('click', () => {
  shootWeb();
})

spider.addEventListener('mouseup', () => {
  removeEventListener('mousemove', spiderMoveHandler);
  shootWeb();
})

spider.addEventListener("mousedown", (e) => {
  // drag로 이동한 경우 translate로 offset의 x,y 만큼 이동한 상황이다.
  // translate는 현재 위치를 기반으로 이동하므로 이전에 이동한 offset의 values 만큼 빼주어야 한다.
  initialPointer.x = e.clientX - offset.x;
  initialPointer.y = e.clientY - offset.y;
  
  addEventListener("mousemove", spiderMoveHandler);
  initialWeb();
});

spider.addEventListener("touchend", () => {
  removeEventListener("touchmove", spiderMoveHandler);
  shootWeb();
});

spider.addEventListener("touchstart", (e) => {
  // spider를 터치시 아래 요소들도 같이 터치되는 것을 막기위해 사용
  e.preventDefault();
  initialPointer.x = e.clientX || e.touches[0].clientX - offset.x; // clientX,Y 는 viewport를 기준으로 x,y 위치를 반환함
  initialPointer.y = e.clientY || e.touches[0].clientY - offset.y;

  addEventListener("touchmove", spiderMoveHandler);
  initialWeb();
});

 

>> mouse의 이벤트 객체는 clientX, clientY를 반환해주는데 이 두 속성은 viewport를 기준으로 위치를 반환해 줍니다.

 

DOM요소의 현재 위치를 알고 싶을때는 

getBoundingClientRect() 메소드를 사용할 수 있습니다.

const boxPosition = { x: 0, y: 0}

boxPosition.x = dragBox.getBoundingClientRect().x;
boxPosition.y = dragBox.getBoundingClientRect().y;



위의 이미지가 반환 값을 잘 설명하고 있어서 설명은 위의 Image로 대체하겠습니다.

 

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

Element.getBoundingClientRect() - Web API | MDN