목차
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>
주소 복사
랜덤 이동