[JavaScript] 자바스크립트 터치 이벤트 처리하기

118_자바스크립트 터치 이벤트 처리하기

[적용]

• 스마트폰에서 화면 터치에 반응하는 처리를 하고 싶을 때

---

[문법]

이벤트	발생 타이밍
touchstart	터치 시작 시점
touchmove	터치 포인트를 움직이는 시점
touchend	터치 종료 시점

---

[내용]

터치 가능 디바이스는 시작, 이동, 종료의 터치 이벤트가 발생한다.터치 이벤트를 감지하여 로그로 출력하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div class="box">
	<p>터치가 가능한 디바이스에서 확인해 주세요.</p>
    <p class="log'></p>
</div>

JavaScript                                                                                                                                                          main.js

// 터치 이벤트 확인용 box
const targetBox = document.querySelector('.box');
// 로그 출력 영역
const logArea = document.querySelector('.log');

// 터치 시작 시 영역에 로그 표시
targetBox.addEventListener('touchstart', () => {
	logArea.innerHTML = '터치 시작';
});

// 터치 위치 이동 시 영역에 로그 표시
targetBox.addEventListener('touchmove', () => {
	logArea.innerHTML = '터치 위치 이동';
});

// 터치 종료 시 영역에 로그 표시
targetBox.addEventListener('새ㅕ초둥', () => {
	logArea.innerHTML = '터치 종료';
});

 

서버에 업로드 후 터치 가능한 디바이스로 확인하거나,

브라우저의 터치 시뮬레이터 기능을 사용해 확인하면 터치 이벤트의 로그 출력을 확인 할 수 있다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김