[DOM_Event] JS - touchend 이벤트 (= ontouchend 속성) - 손가락 뗄 때 이벤트 발생 (= 터치이벤트 = 온터치속성)

목차

1. touchend 예제 - 손가락 뗄 때 이벤트 발생
2. touchend 정의
3. touchend 구문

touchend 예제 - 손가락 뗄 때 이벤트 발생

 

<p ontouchend="homzzang()">여기터치</p>

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

}

</script>

 

결과보기

touchend 정의

 

터치 스크린 장치에서 사용자가 요소에서 손가락 떼면 이벤트 발생.

 

---

1. 

터치 스크린 없는 장치에선 작동 X

2. cf. 관련 이벤트

• touchstart - 손가락으로 요소 터치할 때 발생
• touchend - 요소에서 손가락 떼면 발생 
• touchmove - 화면에서 손가락 움직일 때 발생
• touchcancel - 터치 중단될 때 발생

 

3.

• 이벤트확산: O
• 취소가능성: O
• 이벤트타입: TouchEvent
• 지원태그: 모든 HTML 요소

 

4.

Safari, Opera 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN touchend 이벤트 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/Document/touchend_event

 

touchend 구문

 

HTML 속성 방식

<element ontouchend="myScript">

JS 속성 방식

object.ontouchend = myScript;

JS 메서드 방식

object.addEventListener("touchend", myScript);

 

PS1. JS메서드 방식 경우, 이벤트명에 on 안 붙임.

PS2. JS메서드 방식 경우, 실행함수명 뒤에 () 안 붙임.