[javascript] 터치 이벤트를 사용하여 터치 시작, 이동, 종료 등의 단계를 구분하는 방법은?

12 Dec 2023

javascript

let element = document.getElementById('targetElement');

element.addEventListener('touchstart', function(event) {
  // 터치 시작 이벤트 처리
});

element.addEventListener('touchmove', function(event) {
  // 터치 이동 이벤트 처리
});

element.addEventListener('touchend', function(event) {
  // 터치 종료 이벤트 처리
});

위의 예제에서는 addEventListener 메서드를 사용하여 각각의 터치 이벤트에 대한 핸들러 함수를 등록합니다. touchstart, touchmove, touchend 이벤트가 발생하면 지정된 함수가 실행됩니다.

event 객체를 통해 터치 이벤트에 대한 정보를 얻을 수 있습니다. 터치한 위치, 이동한 경로, 터치한 손가락의 수 등의 정보를 활용하여 다양한 상호작용을 구현할 수 있습니다.