Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

prototype.js에서 DOM이 로드되었는지 확인하는 Event 처리하기

아마 이런 얘기는 계속 하게 될텐데 여태까지는 HTML안에 속성을 이용해서 자바스크립트를 호출했지만(대표적인 예로 onclick="") 이제는 자바스크립트를 분리해서 HTML 외부에서 이벤트리스너를 등록하는 것이 일반적인 추세이다. 그중에서도 자바스크립트작업을 할 때 가장 시작점이 되는 것이 DOM이 로드되었는지 확인하는 것이다. DOM이 로드된 후에야 이벤트 리스너를 등록하던지 DOM을 핸들링 하던지 할테고 DOM이 로드되기 전에 핸들링하려고 하면 에러메시지나 나올테니까.....

<body load="init()">

위와 같은 형태가 가장 기본적인 형태의 DOM이 로드되는 것을 확인하는 형태이다. 위에 말했듯이 이런 식으로 HTML과 자바스크립트를 혼용하는 것은 보기도 좋지 않고 점점 사용하지 않으려는 추세이다.

window.onload = function() {
    // 초기화 코드
}

이런 형태가 자바스크립트를 이용해서 할 수 있는 DOM이 로드되었는지를 확인할 때 사용하는 코드이다. 이렇게 사용하면 HTML에 자바스크립트 호출을 섞지않고 사용할 수 있다. 하지만 프로토타입은 이벤트 리스너를 등록할 수 있는 메서드를 제공하고 있다.

Event.observe(element, eventName, handler)


이것을 이용해서 DOM이 로드 되었는지를 확인할 수 있는 이벤트를 지원하고 있다.

document.observe('dom:loaded', function() {
    // 초기화 코드
});

dom:loaded라는  이벤트를 프로토타입 1.6부터는 지원해서 DOM 로드완료를 확인할 수 있다. 여기서 dom:loaded는 순수하게 DOM이 로드되었는지만을 확인한다. img등 다른 리소스들은 다 로드되지 않았을 수도 있지만 DOM자체는 모두 로드되었다. 이렇기 때문에 초기화 코드(초기화를 위한 특별한 기능이나 다른 이벤트리스너의 등록....)를 사용하기에는 딱 좋다.

그리고 window.onload의 경우는 한 문서에서 단 한번밖에 사용할 수 없다. 자바스크립트의 입장에서 본다면 window객체에 onload변수라고 볼 수 있기 때문에 2번 정의하면 2번째 정의한 것이 첫번째 것을 덮어써버리고 첫번째 정의한 것은 동작하지 않는다.(변수라고 생각하면 당연한 얘기다...) 하지만 dom:loaded를 사용하면 이런 일이 없다. 정의된 순서대로 여러번 정의하더라도 덮어쓰지 않고 모두 동작한다. 외부 자바스크립트를 많이 불러쓸 경우에 서로 덮어쓰는 문제를 방지할 수 있다.


덧) 별거 아닌 코드인데 할때마다 좀 헷갈린단 말야...
2008/11/12 02:11 2008/11/12 02:11