[javascript] 자바스크립트를 사용한 모바일 디바이스의 터치 이벤트 처리

05 Dec 2023

javascript

모바일 디바이스에서는 터치 이벤트를 처리하는 것이 중요합니다. 자바스크립트를 사용하여 모바일 디바이스의 터치 이벤트를 감지하고 처리하는 방법을 알아보겠습니다.

터치 이벤트 종류

모바일 디바이스의 터치 이벤트는 다음과 같은 종류가 있습니다:

touchstart - 손가락이 화면에 닿을 때 발생하는 이벤트
touchmove - 손가락이 화면 위를 이동할 때 발생하는 이벤트
touchend - 손가락이 화면에서 떨어질 때 발생하는 이벤트

터치 이벤트 처리 예제

다음은 간단한 터치 이벤트 처리 예제입니다:

// 터치 이벤트를 감지하는 함수
function handleTouch(event) {
   var touch = event.touches[0];
   // 터치한 지점의 좌표 출력
   console.log('터치 위치: ' + touch.pageX + ', ' + touch.pageY);
}

// 요소에 터치 이벤트 리스너 등록
var element = document.getElementById('myElement');
element.addEventListener('touchstart', handleTouch, false);

위 예제에서는 touchstart 이벤트를 감지하고, 터치한 지점의 좌표를 콘솔에 출력하는 handleTouch 함수를 정의했습니다. 그리고 getElementById 함수를 사용하여 터치 이벤트를 등록할 요소를 가져와서 addEventListener 메서드로 이벤트 리스너를 등록했습니다.

터치 이벤트 예제 사용법

터치 이벤트 예제를 사용하기 위해서는 다음과 같은 단계를 따르면 됩니다:

HTML 문서의 <head> 태그에 위의 자바스크립트 코드를 포함한 <script> 태그를 추가합니다.
터치 이벤트를 감지하려는 요소에 id 속성을 추가하고, 자바스크립트 코드에서 참조할 수 있도록 합니다.

<!DOCTYPE html>
<html>
<head>
   <title>터치 이벤트 예제</title>
   <script>
   // 자바스크립트 코드
   </script>
</head>
<body>
   <div id="myElement">
      터치 이벤트를 감지할 요소
   </div>
</body>
</html>

위의 예제 코드에서는 id="myElement" 속성을 가진 <div> 요소를 생성하여 터치 이벤트를 감지할 요소로 활용했습니다.

참고 자료

MDN Touch Events