[DOM_Event] JS - touchstart 이벤트 - 사용자가 요소를 터치할 때 실행 (= touchstart이벤트 = 터치스타트이벤트)

목차

1. touchstart 예제 - HTML ontouchstart 속성 방식
2. touchstart 정의
3. touchstart 구문
4. touchstart 예제 - JS ontouchstart 속성 방식
5. touchstart 예제 - JS addEventListener 메서드 방식

touchstart 예제 - HTML ontouchstart 속성 방식

 

<p id="hz" ontouchstart="homzzang()">홈짱닷컴 주소 확인</p>

<p id="res"></p>

<script>

function homzzang() {

  document.getElementById("res").innerHTML = "Homzzang.com";

}

</script>

touchstart 정의

 

사용자가 요소를 터치할 때 스크립트를 실행.

 

---

 

1.

사용자 터치 가능 기기 (예: 모바일, 태블릿)에서만 작동.

 

2. 터치 이벤트 종류

• touchstart 이벤트 - 사용자가 화면에 손가락을 대면 발생.
• touchmove 이벤트 - touchstart 이벤트 후, 손가락을 이동시켰을 때 발생. / 이벤트 핸들러를 등록하여 사용자가 터치 이벤트를 발생시키는 지점을 추적하거나, 드래그 앤 드롭 작업을 구현하는 데 사용됨.
• touchend 이벤트: 사용자가 손가락을 화면에서 떼면 발생. / 이벤트 핸들러를 등록하여 사용자의 터치 이벤트를 감지하고, 해당 이벤트에 대한 처리를 수행하는 데 사용됨.
• touchcancel 이벤트: touchstart 이벤트가 발생한 후, touchmove 이벤트가 발생하지 않고 touchend 이벤트도 발생하지 않는 경우, 이벤트 핸들러를 등록하여 touch 이벤트를 취소하고, 해당 이벤트에 대한 처리를 수행하는 데 사용됨.

 

3. UiEvent 속성

• detail 속성 - 이벤트에 대한 세부 정보가 포함된 숫자
• view 속성 - 이벤트가 발생한 Window 객체에 대한 참조

 

4.

• 이벤트확산: O
• 취소가능성: O
• 이벤트타입: touchEvent
• 지원HTML: 모든 보이는 HTML 요소

 

5.

주요 최신 브라우저 모두 지원.
(IE11 이하 브라우저는 지원 X)

 

ontouchstart 구문

 

HTML 방식

• <element ontouchstart="myScript">

 

JS 방식 (3가지)

• object.ontouchstart = ()=>{myScript};
• object.ontouchstart = function(){myScript};
• object.addEventListener("touchstart", myScript);

---

[속성값]

 

myScript

사용자가 요소를 터치할 때 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.

 

touchstart 예제 - JS ontouchstart 속성 방식

 

<p id="hz">홈짱닷컴 주소 확인</p>

<p id="res"></p>

<script>

document.getElementById("hz").ontouchstart = homzzang;

function homzzang() {

  document.getElementById("res").innerHTML = "Homzzang.com";

}

</script>

 

touchstart 예제 - JS addEventListener 메서드 방식

 

<p id="hz">홈짱닷컴 주소 확인</p>

<p id="res"></p>

<script>

document.getElementById("hz").addEventListener("touchstart", homzzang);

function homzzang() {

  document.getElementById("res").innerHTML = "Homzzang.com";

}

</script>