JavaScript Event 관리

window.onload 이벤트를 등록하면 이미지나 css 파일이 다 로드된 후에 이벤트가 발생한다.
가끔 웹 서버 문제로 이미지 하나가 로딩이 늦어 질 경우 이벤트 발생 시점이 의도한 바와 차이가 생기게 된다.

이를 해결하기 위한 방법이 아래의 URL 에서 확인 가능하다.

The window.onload Problem - Solved!
* http://dean.edwards.name/weblog/2005/09/busted

window.onload (again)
* http://dean.edwards.name/weblog/2006/06/again/

위의 방법에 따라 onload 이벤트를 등록하게 될 경우 내부적으로 이벤트를 Push 하는 방법을 적용하고,
onunload 이벤트에 하나가 아닌 다수의 이벤트를 등록할 때 이를 관리하기 위한 부분도 추가하여
기존에 사용하던 이벤트 관리 스크립트를 업데이트 했다.

아래는 이벤트 관리 스크립트 소스.

/** * Class :: Event add, remove, registed event unload * File :: Event.js * * @classDescription 브라우저에 따른 이벤트 등록, 해제, 등록된 이벤트 모두 해제 */ var EventManager = function() { constructor = this.__construct(); }

/** * window 객체에 load 이벤트 등록시 펑션 리스트를 등록 */ var _OnLoadList = [];

/** * window 객체에 unload 이벤트 등록시 펑션 리스트를 등록 */ var _UnLoadList = [];

/** * prototype of EventHandler class * __construct * * _EventList * * add * remove * unload */ EventManager.prototype = { /** * window의 unload 이벤트에 EventHandler.unload 메소드를 등록 * * @see #unload * @constructor */ __construct: function() { var oThisObject = this; /* for Mozilla */ if (window.addEventListener) { window.addEventListener("DOMContentLoaded", oThisObject.baseRun, false); /* for Safari */ } else if (/WebKit/i.test(navigator.userAgent)) { // sniff var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { oThisObject.baseRun(); } }, 10); /* for Internet Explorer */ } else { var bInit = false; /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var oScriptLoad = document.getElementById("__ie_onload"); oScriptLoad.onreadystatechange = function() { if (this.readyState == "complete") { oThisObject.baseRun(); } }; bInit = true; /*@end @*/ /* for Other */ if (bInit == false) { window.onload = oThisObject.baseRun; } } this.add( window, 'unload_event', EventManager.prototype.unload ); }, /** * 페이지 종료시 등록된 이벤트를 해제하기 위하여 추가된 Event 목록 * * @type {Array} add 에서 데이터 추가 */ _EventList: [], /** * event 를 addEventListener 와 attachEvent 를 사용하여 등록 <br /> * _EventList 에 등록된 이벤트를 배열로 저장 * * @param {Object} setElement HTML Object * @param {String} eventName event name - on 을 접두어로 붙이지 않음 * @param {Function} funcName Exist function name */ add: function( setElement, eventName, funcName ) { if ((setElement == window) && (eventName == 'load')) { _OnLoadList.push(funcName); } else if ((setElement == window) && (eventName == 'unload')) { _UnLoadList.push(funcName); } else { if ((setElement == window) && (eventName == 'unload_event')) { eventName = 'unload'; } if ( window.addEventListener ) { setElement.addEventListener( eventName, funcName, false ); } else { setElement.attachEvent( 'on' + eventName, funcName ); } this._EventList.push({ object: setElement, event: eventName, func: funcName }) } }, /** * event 를 removeEventListener 와 detachEvent 를 사용하여 해제 * * @param {Object} setElement HTML Object * @param {String} eventName event name - on 을 접두어로 붙이지 않음 * @param {String} funcName Exist function name */ remove: function( setElement, eventName, funcName ) { if ( window.removeEventListener ) { setElement.removeEventListener( eventName, funcName, false ); } else { setElement.detachEvent( 'on' + eventName, funcName ); } },

/** * window.unload 이벤트시 _EventList 에 등록된 모든 이벤트를 해제 */ unload: function() { var sFunction = ''; for ( var oEventData in _UnLoadList ) { sFunction = _UnLoadList[oEventData]; if (sFunction == '______array') { continue; } sFunction.call(); } _UnLoadList = [] for ( var oEventData in this._EventList ) { this.remove( oEventData.object, oEventData.event, oEventData.func ); } },

/** * window.onload 에 등록한 function 을 모두 실행시킨다. */ baseRun: function() { var sFunction = ''; for ( var oEventData in _OnLoadList ) { sFunction = _OnLoadList[oEventData]; if (sFunction == '______array') { continue; } sFunction.call(); } } }

var oEvent = new EventManager();

var Event = function() { return oEvent; }