예전에 BC카드 프로젝트를 작업할때 window.onload 이벤트를 쓸일이 있었다.
onload 이벤트를 바르게 쓸줄 몰라 <body onload="함수명()"> 이렇게 인라인으로 함수처리를 했었는데
그 당시 스크립트에 능했던 연길씨가 window.onload = function() {} 을 걸어서 쓰는걸 보고 놀라워 했었다.
그때 연길씨가 window.onload = function; 라고 작업해주면서, 이렇게 쓰면 onload 함수가 하나일땐 상관 없는데
여러개일땐 곤란한데 라고 중얼거려주시는걸 흘려 들었는데, DOM Script 6장을 공부하면서 잠시 추억에 젖어 BC 프로젝트 할때가 떠올랐다.
window.onload = firstFunction;
아주 직관적인 방법이지만 약간 근시안적이라고 윤석찬님이 책에 표현해 주셨다.
위처럼 onload 함수를 걸어주면 page onload 했을때 함수를 하나만 실행시킬수 있다.
window.onload = firstFunction;
window.onload = secondFunction;
이렇게 두개를 적어준다고 해도, 뒤에 선언한 secondFunction 함수만 실행 된다.
차선책으로 아래와 같이 적어줄수도 있다.
window.onload = function() {
firstFunction();
secondFunction();
}
실행해야 될 함수 개수가 적을땐 간단히 해결할수 있지만, 스크립트 규모가 크거나 문서를 읽고 난 후 실행해야할 함수 개수가 많을 경우엔
아래와 같이 쓰는게 좋다.
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
