HTML DOM의 touchend 이벤트는 사용자가 터치 스크린에서 손가락을 떼는 순간, 즉 터치가 종료될 때 발생하는 이벤트입니다. 모바일 웹 애플리케이션에서 버튼을 눌렀다 뗐을 때 특정 동작을 처리하거나, 길게 누르기(hold)와 같은 제스처를 구현할 때 유용하게 사용됩니다.
참고: touchend 이벤트는 오직 터치 스크린이 있는 기기(스마트폰, 태블릿 등)에서만 작동합니다. 일반 데스크톱 환경의 마우스 클릭에는 반응하지 않으므로, 필요에 따라 mouseup 이벤트와 함께 사용하는 것이 좋습니다.
touchend 이벤트 문법
HTML에서 인라인으로 이벤트 등록하기
ontouchend = "eventFunction()"
JavaScript에서 이벤트 등록하기
eventObject.ontouchend = eventFunction
이 외에도 addEventListener("touchend", 함수) 방식을 사용하면 하나의 요소에 여러 개의 핸들러를 등록할 수 있어 더욱 유연한 코드 작성이 가능합니다.
touchend 이벤트 실전 예제
아래 예제는 touchstart와 touchend 이벤트를 함께 활용한 '1초 홀드 게임'입니다. 버튼을 1초 이상 꾹 누르고 있으면 승리 메시지가 표시되고, 그 전에 손을 떼면 타이머가 취소됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchend event</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 50%;
font-size: 20px;
padding: 20px;
border: 5px solid rgb(220, 53, 69);
background: rgba(220, 53, 69, 0.5);
color: #fefefe;
}
</style></head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-touchend-event</legend>
<label for="textSelect">Game Time</label>
<input type="button" id="gameSelect" value="Hold On">
<div id="divDisplay">Hold On for 1 - sec to Win</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var gameSelect = document.getElementById("gameSelect");
var duration = 1000;
var timer;
gameSelect.ontouchstart = startEventAction;
function startEventAction() {
timer = setTimeout(victory, duration);
}
gameSelect.ontouchend = endEventAction;
function endEventAction(){
if(timer)
clearTimeout(timer);
}
function victory(){
divDisplay.textContent = "You Win"
}
</script>
</body>
</html>코드 설명
- touchstart 발생 시:
setTimeout()으로 1초(1000ms) 후 승리 처리를 예약합니다. - touchend 발생 시: 아직 1초가 지나기 전이라면
clearTimeout()으로 타이머를 해제하여 실패 처리합니다. - 1초간 홀드 성공 시:
victory()함수가 실행되어 화면에 "You Win" 메시지가 출력됩니다.
실행 결과
'Hold On' 버튼을 터치하기 전 – 안내 문구가 표시된 초기 화면입니다.
'Hold On' 버튼을 1초간 터치한 후 – 승리 메시지가 출력됩니다.
정리
touchend 이벤트는 터치 기반 UI에서 필수적인 이벤트 중 하나입니다. touchstart, touchmove와 함께 사용하면 스와이프, 롱프레스, 드래그 앤 드롭 같은 다양한 모바일 제스처를 구현할 수 있습니다. 다만 데스크톱 브라우저에서는 동작하지 않으므로, 크로스 디바이스 지원이 필요하다면 마우스 이벤트와 병행 처리하는 것을 잊지 마세요.