-
👀 DOMContentLoaded
브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다. 그러므로 해당 이벤트는 DOM이 준비된 것을 확인한 후 원하는 DOM 노트를 탐색해 핸들러를 등록하여 인터페이스를 초기화할 때 활용할 수 있다.
window.addEventListener('DOMContentLoaded', function)Jquery에서 DOMContentLoaded 비슷한 기능을 하는것이 $(document).ready( )이다.
$(document).ready(function() { // 실행될 코드 })👀 load
HTML로 DOM트리를 완성하고, 이미지와 스타일시트 등의 외부 기타 자원도 모두 불러오는 것이 끝났을 때 발생한다. 그러므로 해당 이벤트는 이미지 사이즈를 확인할 때와 같이 외부 자원이 로드된 후 스타일이 적용된 상태에서 뿌려지는 요소의 실제 크기를 확인하고자 할 때 활용할 수 있다.
window.onload = function() {} window.addEventListener('load', function)- 해당 이벤트는 문서에 포함한 모든 콘텐츠가 로드된 후에 실행되므로 불필요한 로딩 시간이 추가될 수 있다.
- 동일한 문서에 오직 onload는 하나만 존재해야 한다. 중복될 경우 마지막 선언이 실행된다.
- window객체 뿐만 아니라 원하는 객체가 로드되었을 때 실행될 코드로 설정할 수도 있다.
document.getElementById('myEl').onload = function() {}Jquery에서 load 비슷한 기능을 하는 것이 load( )이다.
$(window).load(function() { // 실행될 코드 })일반적으로 스크립트 문서의 하단 </body> 이전에 스크립트를 삽입하면 굳이 해당 이벤트를 사용할 필요는 없다. 다만, 문서의 <head>영역에 스크립트가 삽입되어 있거나, 외부의 파일에 정의되어 있다면 이벤트를 문서의 로드 시점에 맞게 처리해야 한다.
728x90'Javascript' 카테고리의 다른 글
JS 프로처럼 쓰는 팁 (0) 2022.09.05 데이터 불변성 (0) 2022.09.02 ES6 Classes (0) 2022.09.01 전개연산자 (0) 2022.08.28 구조 분해 할당 (0) 2022.08.28 댓글
