クリックすると変化する画像（読み込む度に順番も変化）

自分のバンドのサイトを作るのに、久しぶりにコードを書いてみました。

イベントハンドラにメソッドを設定すると、 this が new したオブジェクトではなくて、イベントの発生元に変わってしまうので、グローバル変数 job にいったん this を退避させているんですけど、もっとスマートな方法ってないんでしょうかね？ addEventListener を使っても一緒だし…。

<script type="text/javascript"><!--
var num_ary = [0,1,2,3];
var job;
function Random_img(ary,tgt){
	this.ary = ary;
	this.length = ary.length;
	this.tgt = tgt;
	this.shuffled_array = [];
	this.obj = null;
	this.count = 0;	
}
Random_img.prototype = {
	lord_img : function(){
		for ( var i = 0 , i_max = this.length ; i < i_max ; i++ ){ 
			( new Image() ).src = "live/" + this.ary[i] + ".jpg";
		}
	},
	random_img : function(){
		var i , random_num , temp_array = this.ary , array_length = this.length , temp_elemnt;
		for(i = 0 ; i < array_length ; i++){
			random_num = Math.floor(Math.random() * temp_array.length);
			temp_element = temp_array[random_num];
			temp_array.splice(random_num,1);
			this.shuffled_array.push(temp_element);
		}
	},
	append_img : function(){
		this.obj = document.createElement("img");
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[0] + ".jpg");
		this.tgt.appendChild(this.obj);
		job = this;
		this.count++;
	},
	img_change : function(){
		job.obj.setAttribute( "src" , "live/" + job.shuffled_array[job.count] + ".jpg");
		job.count++;
		job.count %= job.length;
	}
/*
	img_change : function(){
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[this.count] + ".jpg");
		this.count++;
		this.count %= this.length;
	}	//イベントにメソッドを設定すると、thisがnewしたオブジェクトじゃなくてメソッドを設定した要素になっちゃう。
*/
}
onload = function(){
	var random_obj = new Random_img(num_ary,document.getElementById("tgt"));
	random_obj.lord_img();
	random_obj.random_img();
	random_obj.append_img();
	random_obj.obj.onclick = random_obj.img_change;
	//if(addEventListener)random_obj.obj.addEventListener( "click" , random_obj.img_change , false );
}

//--></script>

<div id="tgt">
</div>