webAPIs-좌표 연습

Javascript

이지영 2022. 5. 30. 12:31

1.div 태그를 여러개 만들어서 특정 div만 다른 색깔로 만들어 보겠습니다

2. 스크롤링 했을때 특정 div를 클릭을 하면 client x,y 와 page x,y를 출력해볼것 (Rect 오브젝트를 받아와야함)

3.버튼 기능을 만들고 클릭했을때 특정 이벤트가 작동 하도록 구현해보겠습니다.

DOMContentLoaded와 load의 차이

<DOMContentLoaded>

document 즉 HTML만 다 완료가 되면 console.log에 DOMContentLoaded가 출력(호출)

<load>

페이지 안에 쓰여지고 있는 폰트나 이미지(css등) 같은것들이 다 다운로드가 완료되면 호출

defer

자바스크립트 파일을 하나 만든후 defer 옵션을 사용하게 되면

분석이 완료된 다음에 DOMContentLoad가 출력되기 이전에 먼저 호출이 됨

=>즉

이미지나 폰트에 대해서 뭔가를 수행하지 않는 이상 DOMContentLoad안에서 동작을 수행하는 것이 조금더 빠르게

사용자가 볼수있는 장점이있다

<사용자가 페이지를 나가기전에 이벤트를 호출 해주는 함수>

beforeunload : unload 되기 전에 호출이 되고

unload : 리소스 같은 것들이 다 다운로드 된 다음에 이벤트가 발생