[JavaScript] 객체 내에서 생성된 노드에 이벤트 걸기

객체 내에서 생성된 노드, 노드에 걸린 이벤트, 객체 내의 setInterval 함수 전부 객체 내에서 제대로 된 scope를 참조하고자 할 때 아래와 같은 방법을 사용함.

setInterval로 지정된 시간마다 이미지를 바꾸고,

이미지에는 onmouseover, omouseout 이벤트를 걸고,

bNeedStop 이라는 변수를 this. 로 공유하는 형태.

var rollingBanner = function(oContainer) {

this.oContainer = oContainer;

this.oImg       = document.createElement("img");

this.aImg = new Array();

this.iCurrentIndex = 0;

        // 이 변수를 공유하기 위하여...

this.bNeedStop = false;

if (this.oContainer) {

this.oContainer.appendChild(this.oImg);

                // 제대로 된 scope를 위한 처리

var t = this;

this.oImg.onmouseover = function() { t.stopRolling(); };

this.oImg.onmouseout  = function() { t.resumeRolling(); };

}

this.addImg = function(sSrc) {

this.aImg.push(sSrc);

};

this.setNextImg = function() {

if (this.bNeedStop) return;

if (this.iCurrentIndex>=this.aImg.length) this.iCurrentIndex = 0;

this.oImg.src = this.aImg[this.iCurrentIndex++];

};

this.stopRolling = function() {

this.bNeedStop = true;

};

this.resumeRolling = function() {

this.bNeedStop = false;

};

this.start = function(iInterval) {

this.setNextImg();

                // 제대로 된 scope를 위한 처리

var t = this;

setInterval(function() {t.setNextImg(); }, iInterval);    

};

};