아마 이런 얘기는 계속 하게 될텐데 여태까지는 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를 사용하면 이런 일이 없다. 정의된 순서대로 여러번 정의하더라도 덮어쓰지 않고 모두 동작한다. 외부 자바스크립트를 많이 불러쓸 경우에 서로 덮어쓰는 문제를 방지할 수 있다.
덧) 별거 아닌 코드인데 할때마다 좀 헷갈린단 말야...
댓글 없음:
댓글 쓰기