콜백함수 / addEventListener / offset과 client값

범위

2.0 Canvas Events

---

와... 오늘 이게 이해가 안돼서 이해하느라 이것저것 다 뒤지면서 공부 많이 했다.

 

추가 공부

1. 콜백 함수

MDN 정의에 따르면 콜백 함수는 다른 함수에 인자로 전달되는 함수이며, 외부 함수 내에서 일종의 루틴 또는 동작을 실행하기 위해 호출된다.

출처: https://velog.io/@ywoosang/addEventListener-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

 

결과는 콘솔창에

'callback test'가 찍힌다

이때 콜백함수는 function two이다.

콜백 함수는 다른 함수에 인자로 전달되는 함수이며, 외부 함수 내에서 일종의 루틴 또는 동작을 실행하기 위해 호출된다.

 

2. addEventListener

출처: https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener#%EC%9D%B4%EB%B2%A4%ED%8A%B8_%EC%88%98%EC%8B%A0%EA%B8%B0_%EC%BD%9C%EB%B0%B1

여기서 type은 mousemove이고 listener는 onMouseMove라는 함수다.

근데 제일 궁금했던건 '도대체 저 popo는 누구한테 값을 받아오는가?'였다.

 

슬랙에 SOS요청 결과 도움을 받았다.

그리고 바닐라 JS로 크롬 앱 만들기 4.2강을 듣고 완전 이해가 갔다.

 

addEventListener는 내가 고른 타입 "mousemove"를 할 때 onMouseMove 함수를 실행시킬 것이다.

그런데 이 때 사랑스러운 JS가 그냥 함수를 실행시키는 것이 아니라 이벤트 값을 들고 올거임

이런거를 함께 들고옴

저 값들이 어디서 나오는가 했는데 그냥 addEventListener에 함께 포장되어 있는거라고 생각하면 될 것 같다.

 

3. 마우스 이벤트의 종류

출처: https://hianna.tistory.com/492

 

---

offset과 client값

 

offsetX, Y은 캔버스 부분과 관련있는 값이다.

clientX, Y는 윈도우 전체 범위 내에서 마우스 위치값을 나타냄

 

---

NOTE

If안에 넣어준 이유

캔버스가 있는 곳에서만 eventlistener를 킬 거니까

 

mouseup에는 stopPainting을 사용하지 않은 이유

니코쌤 설명: 나중에 line이 필요하기 때문

실제로 그리는 게 필요하니까 stopPainting을 사용하지 않음

(이 설명이 아직 이해가 가지 않음.. 다음에 다시 돌아 오겠음)