HTML DOM TouchEvent 객체란?
HTML DOM TouchEvent 객체는 사용자가 터치 기기를 통해 HTML 문서의 요소와 상호작용할 때 발생하는 이벤트를 나타냅니다. 스마트폰이나 태블릿처럼 터치스크린을 지원하는 기기에서 화면을 누르거나 드래그할 때 생성되는 이벤트 정보를 담고 있습니다.
TouchEvent 객체는 아래와 같은 속성과 메서드를 제공합니다.
| 속성/메서드 | 설명 |
|---|---|
| altKey | 터치 이벤트가 발생한 시점에 Alt 키가 눌려 있었는지 여부를 Boolean 값으로 반환합니다. |
| changedTouches | 터치 이벤트의 상태가 변경될 때 트리거된 모든 접촉 지점의 목록을 담은 TouchList 객체를 반환합니다. |
| ctrlKey | 터치 이벤트가 발생한 시점에 Ctrl 키가 눌려 있었는지 여부를 Boolean 값으로 반환합니다. |
| metaKey | 터치 이벤트가 발생한 시점에 Meta 키가 눌려 있었는지 여부를 Boolean 값으로 반환합니다. |
| shiftKey | 터치 이벤트가 발생한 시점에 Shift 키가 눌려 있었는지 여부를 Boolean 값으로 반환합니다. |
| targetTouches | 터치 표면에서 트리거된 모든 접촉 지점의 목록을 담은 TouchList 객체를 반환합니다. 특정 노드 또는 그 자식 노드에서 터치가 시작된 경우, 이후의 터치는 같은 노드에서 발생했을 때만 포함됩니다. |
| touches | 터치 표면에서 트리거된 모든 접촉 지점의 목록을 담은 TouchList 객체를 반환합니다. 특정 노드 또는 그 자식 노드에서 터치가 시작된 경우, 이후의 터치는 다른 노드에서 발생하더라도 모두 포함됩니다. |
참고: 터치 이벤트 예제는 모바일 기기 또는 터치 입력이 가능한 환경에서 접속할 수 있는 온라인 HTML 편집기를 통해 실행했습니다. 화면을 2초간 길게 누르는 것과 같은 실제 터치 동작을 수행하기 위함입니다.
TouchEvent ctrlKey 속성 예제
다음은 ctrlKey 속성을 활용한 예제입니다. 터치와 동시에 Ctrl 키가 눌려 있으면 배경색이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
legend{
border-color: #dc3545;
}
span {
display: inline-block;
width: 40px;
height: 20px;
margin: 1px;
color: #fff;
border: 3px solid black;
}
div span:nth-child(1){
background-color: #FF8A00;
}
div span:nth-child(2){
background-color: #F44336;
}
div span:nth-child(3){
background-color: #03A9F4;
}
div span:nth-child(4){
background-color: #4CAF50;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="eventAction(event)">
<fieldset>
<legend>HTML-DOM-TouchEvent-ctrlKey</legend>
<label for="textSelect">Background Color Changer</label>
<div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">No HotKey Pressed</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.ctrlKey){
formSelect.style.backgroundColor = '#F44336';
formSelect.style.color = '#FFF'
divDisplay.textContent = 'ctrl Key Pressed';
}
}
</script>
</body>
</html>
실행 결과
터치 이벤트 발생 전:
Ctrl 키를 누른 상태로 터치 이벤트를 발생시킨 후:
TouchEvent 이벤트 타입
TouchEvent에는 아래와 같은 이벤트 타입이 있습니다.
| 이벤트 | 설명 |
|---|---|
| ontouchcancel | 하나 이상의 터치 이벤트가 중단되었을 때 touchcancel 이벤트가 발생합니다. |
| ontouchend | 터치스크린에서 손가락을 뗐을 때 touchend 이벤트가 발생합니다. |
| ontouchmove | 터치스크린 위에서 터치 지점이 이동할 때 touchmove 이벤트가 발생합니다. |
| ontouchstart | 터치스크린을 처음 터치했을 때 touchstart 이벤트가 발생합니다. |
ontouchend 이벤트 예제
다음은 ontouchend 이벤트를 활용한 미니 게임 예제입니다. 버튼을 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>
실행 결과
'Hold On' 버튼을 터치하기 전:
'Hold On' 버튼을 터치한 후:
