[Event] Pc에서의 click, Mobile에서의 touch event

---

* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! *

---

PC click event

 

1. onmousedown

: 마우스를 누르고 있는 동안 명령 실행

  ↔ onmouseup

 

2. onmouseup

: 마우스를 떼고 있는 동안 명령 실행

↔ onmousedown

 

- onmousedown 이벤트와 같이 쓰임

(원래 평상시에 마우스를 떼고 있으니까)

- 모바일에서는 사용 불가

 

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click me!
</p>

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}

function mouseUp() {
  document.getElementById("myP").style.color = "green";
}
</script>

---

MOBILE touch event

 

1. ontouchstart

: 모바일 기기 화면을 터치하는 동안 명령 실행

↔ ontouchend

 

2. ontouchend

: 모바일 기기 화면에서 터치를 떼는 동안 명령 실행

↔ ontouchstart

 

- PC에서는 사용 불가

- Pc에서 사용하는 onmousedown, onmouseup 이벤트의 Mobile 버전

- 이벤트 기능은 동일

---

※확실하지 않으니 다시 찾아보고 정리하기※

onpointerup, onpointerdown 이벤트를 사용하면 터치/비터치 환경 모두에서 쓸 수 있다고 함.

 

 

코드출처: https://www.w3schools.com/jsref/event_onmousedown.asp