js为元素添加鼠标事件无效问题

在做练习的时候想要给一个图片元素添加点击事件：点击后修改其src属性，更换图片，在语法没有问题的情况下，浏览器的debug显示“Uncaught TypeError: Cannot read property 'setAttribute' of undefined”这样的语句，代码如下：

function circleChange(){
	if(!document.getElementById)  return false;
	if(!document.getElementsByTagName) return false;
	var e=document.getElementById("bullets");
	if(!document.getElementById("bullets")) return false;
	var images=e.getElementsByTagName("img");
	if(!e.getElementsByTagName("img")) return false;
	for(var i=0;i<images.length;i++){
		
		images[i].onmouseover=function(){
			images[i].setAttribute("src","img/circle-active.png");
		}
		images[i].onmouseout=function(){
			images[i].setAttribute("src","img/circle-normal.png");
		}
	}
}
addLoadEvent(circleChange);

　　之后我尝试很多种方法，最后发现只要把鼠标移入和移出事件语句中的images[i]更换成this之后，就可以解决该问题：

function circleChange(){
	if(!document.getElementById)  return false;
	if(!document.getElementsByTagName) return false;
	var e=document.getElementById("bullets");
	if(!document.getElementById("bullets")) return false;
	var images=e.getElementsByTagName("img");
	if(!e.getElementsByTagName("img")) return false;
	for(var i=0;i<images.length;i++){
		
		images[i].onmouseover=function(){
			this.setAttribute("src","img/circle-active.png");
		}
		images[i].onmouseout=function(){
			this.setAttribute("src","img/circle-normal.png");
		}
	}
}
addLoadEvent(circleChange);

　　这是因为作用域问题导致的浏览器无法找到images[i]的setAttribute属性