목차
- touchstart 예제 - HTML ontouchstart 속성 방식
- touchstart 정의
- touchstart 구문
- touchstart 예제 - JS ontouchstart 속성 방식
- 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>
