在封装函数中处理事件监听
上代码:
function ImgPlayer_V1(sparentId , oData){
this.oLis = document.getElmentsByTagName("li");
}
ImgPlayer_V1.prototype.showImage = function(){};
ImgPlayer_V1.prototype.initialize = function(){
var oLi = null;
for(var i = 0;i < this.oLis.length;i++)
{
oLi = this.oLis[i];
oLi.index = i;
oLi.onmouseover = function(self){
var reference = self;XXXXXXXX
// 这里我需要给oLi注册一个onmouseover,然后调用ImgPlayer_V1对象的showImage方法,使用了闭包的形式.
// 但是这样做相当于给每一个oLi的onmouseover事件都存储了一个self,这样导致内存的开销会不会很大?
// 小弟不是很懂,求教高手如何用其他的形式处理这种问题,最好有代码有真相
return function(){
reference .showImage;
};
}(this);
}
};
我想将这个功能封装成对象,通过new运算符就搞定
我不想用以下这种形式,
window.onlaod = function(){
function showImage(){}
document.getElmentsByTagName("li");
for(var i = 0;i < this.oLis.length;i++)
{
oLi = this.oLis[i];
oLi.index = i;
oLi.onmouseover = function(){
showImage;XXXXXXX;
}
}
}
------解决方案--------------------
HTML code
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
function ImgPlayer_V1(sparentId , oData){
this.parent = document.getElementById("parent");
}
ImgPlayer_V1.prototype.showImage = function(i){
alert(i);
};
ImgPlayer_V1.prototype.initialize = function(){
var self = this;
this.parent.onmouseover = function(e){
var e = e || event;
var r = e.target || e.srcElement;
if(r.tagName.toLowerCase() == "li"){
self.showImage(r.innerText);
}
};
};
var aaa = new ImgPlayer_V1();
aaa.initialize();
</script>
------解决方案--------------------
你用jquery去处理一下,可能会更好的。