Step02_event3 (이벤트 목록, 좌표값)

 

배운 것들을 응용해서 예제를 작성해보자

 

필자 작성

선생님 작성

 

1,2번 예제는

2022.07.07 - [javascript] - Step02_event (addEventListener)

2022.07.07 - [javascript] - Step02_event2 (css에 접근하기)

이전 배운 것들을 참고하여 작성하였다.

 

3번 예제는 구글링을 하여 작성하였다.

https://developer.mozilla.org/ko/docs/Web/API/MouseEvent/clientX

 

해당 글에서 마우스 좌표값을 구하는 공식이 있는데 해당 내용을 예제에 맞게 변경하고 싶어서 더 찾아봤다.

 

 

자주 쓰일 것 같은 이벤트 목록

 

keydown : 키보드를 눌렀을 때 실행

keyup : 키보드를 눌렀다가 놓았을 때 실행

mousedown : 마우스 클릭시 실행

mouseup : 마우스를 클릭했다 놓았을 때 실행

mousemove : 마우스를 움직일 때 실행

touchstart : 화면 터치시 실행

touchmove : 터치 이동시 실행

touchend : 터치 종료시 실행

https://developer.mozilla.org/ko/docs/Web/Events

 

좌표값을 구하는 메소드의 차이점

 

pageX,Y : 문서 맨위 부터 측정한다.

clientX,Y : 화면에 보이는 문서 맨위 기준으로 측정한다.

offsetX,Y : 이벤트 대상이 기준이 된다.

screenX,Y : 사용자 스크린 기준으로 측정한다.

 

이어서 2개의 매개 변수를 연동시키는 예제다.