日期:2014-05-16  浏览次数:20353 次

在封装函数中处理事件监听
上代码:
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去处理一下,可能会更好的。