[javascript] resize 이벤트

1 resize 이벤트란?

---

사용자가 브라우저 창이나 프레임을 변경했을 때 호출되는 이벤트

 

사용 방법

- window.onresize 속성

- window.addEventListener('reisize', ...)

 

주의할 점

오직 window 객체에서만 발생한다.

window 객체에 등록된 핸들러만 이벤트를 수신한다.

 

그리고 resize 이벤트는 창의 크기를 미세하게 조절해도 여러번 실행되기 때문에

DOM 수정과 같은 복잡한 처리는 실행하지 않도록 해야한다.

 

* requestAnimationFrame, setTimeout, customEvent 등을 이용해 이벤트를 스로틀(throttle)하는 것이 좋다.

 

 

2 resize 이벤트 활용

---

See the Pen Untitled by yanggjoy (@yanggjoy) on CodePen.

 

더 공부해야할 것.

- viewport

- 리사이즈 이벤트 최적화 기술.