웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고, 각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다.
일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다.
onload
문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다).
window.onload = function() {
//실행될 코드
}
- 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다.
- 동일한 문서에 오직
onload는 하나만 존재해야 한다.- 중복될 경우, 마지막 선언이 실행된다.
- 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
- 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.
<body> 요소에 속성(attribute)으로 지정될 수 있다.
<body onload="실행될 코드">
- 위와 같이 사용된 경우,
window.onload로 지정된 것은 무시된다.
window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.
document.getElementById("myFrame").onload = function() {
//실행될 코드
}
이벤트를 직접 연결할 수도 있다.
window.addEventListener('load', function(){
//실행될 코드
});
jQuery load
jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.
$(window).load( function() {
//실행될 코드
})
DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트이다.
window.addEventListener('DOMContentLoaded', function(){
//실행될 코드
})
- onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다.
- IE8 이하에서는 지원하지 않는다.
IE8 이하에 대체방안
비슷한 기능을 하는 jQuery의 ready 메소드를 순수 자바스크립트로 대체하는 방법을 탐구하다 발견한 방법이다.(링크)
// Mozilla, Opera, Webkit
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function () {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
domReady();
}, false);
}
// Internet Explorer
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function () {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
domReady();
}
});
}
//DOM이 모두 로드 되었을 때
function domReady () {
//처리할 내용
}
jQuery ready
자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자.
$(document).ready(function(){
//실행될 코드
});
- onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
- 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.
'웹코딩 > Javascript' 카테고리의 다른 글
| 자바스크립트 표현식들 (0) | 2016.04.30 |
|---|---|
| 자바스크립트 구성요소 (0) | 2016.04.06 |
| 스크립트 모듈화 - Require.js #1 (0) | 2016.04.01 |
| 자바스크립트 삽입방식과 위치 (8) | 2016.03.18 |
| ECMAScript 6 특징 정리 링크들 (0) | 2016.03.15 |
