티스토리 뷰

프로그래밍/JavaScript Web App

BODY onload에 여러개의 함수를 걸어주기!

쇠주는참이슬 2012. 11. 20. 10:08

출처 : http://sangini.tistory.com/57

BODY onload (<Body onload="aaa();">)에 여러개의 함수를 걸어주기!

온로드에 여러개 함수 걸기


예전에 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);

'프로그래밍 > JavaScript Web App' 카테고리의 다른 글

자바스크립트 함수 function()  (0) 2013.01.15
constructor, hasOwnProperty, in 자바스크립트 객체타입 확인  (0) 2013.01.15
자바스크립트(JavaScript) 배열(array) sort, splice, push 정렬,추가,수정,삭제  (0) 2013.01.14
자바스크립트 디버깅 console.log  (0) 2013.01.14
자바스크립트 개발을 하기 전에 꼭 한번 읽어 보세요.  (0) 2012.04.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함