Javascript:将自定义对象方法绑定到事件侦听器

时间:2016-04-06 20:25:05

标签: javascript

我被困在Javascript的事件处理程序方面。

rowCells [j]是对唯一对象的引用。 galleryCell也是对新创建对象的引用。按理说这两者可以联系在一起。

但是,似乎两个引用完全没有绑定在一起,以使事件侦听器正常工作。所有单元格都被分配给相同的东西(最后一个galleryCell对象)。

galleryCell变量位于for循环中,在每次迭代时获取一个新引用。为什么这些引用会丢失?

function TypeGallery (galleryObj)
{  //receives the <div> element that contains rows and cells of a gallery

   //Properties --------------
   var galleryCellArr = [];   //array of galleryZoomCell objects

   //Methods -----------------  
   var Initialize  = function ()
   {
      var rows     = galleryObj.children;
      var rowCount = rows.length;
      for (var i=0;i<rowCount;i++)
      {
         var rowCells     = rows[i].children;
         var rowCellCount = rowCells.length;
         for (var j=0;j<rowCellCount;j++)
         {
            var sliderObj   = new TypeSlider(300,1,false);
            var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj)
            galleryCellArr.push(galleryCell);

            rowCells[j].onmousedown = function () {galleryCell.Deploy();};
            rowCells[j].onmouseup   = function () {galleryCell.Retract();};
         }
      }
   }

   //Initialization
   Initialize();
}

2 个答案:

答案 0 :(得分:2)

尝试将javascript闭包放在for循环中,如下所示:

function TypeGallery (galleryObj)
{  //receives the <div> element that contains rows and cells of a gallery

   //Properties --------------
   var galleryCellArr = [];   //array of galleryZoomCell objects

   //Methods -----------------  
   var Initialize  = function ()
   {
      var rows     = galleryObj.children;
      var rowCount = rows.length;
      for (var i=0;i<rowCount;i++)
      {
         var rowCells     = rows[i].children;
         var rowCellCount = rowCells.length;
         for (var j=0;j<rowCellCount;j++)
         {
            (function(j) {

                var sliderObj   = new TypeSlider(300,1,false);
                var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj)
                galleryCellArr.push(galleryCell);

                rowCells[j].onmousedown = function () {galleryCell.Deploy();};
                rowCells[j].onmouseup   = function () {galleryCell.Retract();};

            })(j);
         }
      }
   }

   //Initialization
   Initialize();
}

答案 1 :(得分:0)

好的,我现在了解Javascript和块范围限制的问题。

在此过程中我发现了第二个可能的解决方案:是否有任何异议或警告用'让'替换'var' for for循环?
就我所知,这段代码很好用。有任何隐患吗?

   var Initialize  = function ()
   {
      var rowsArr  = galleryObj.children;
      var rowCount = rowsArr.length;
      for (let i=0;i<rowCount;i++)
      {  //Javascript does not understand block-scope unless the let keyword
         let rowCellsArr  = rowsArr[i].children;
         let rowCellCount = rowCellsArr.length;
         for (let j=0;j<rowCellCount;j++) 
         {
            //Attach (rowCellsArr[j]);

            let sliderObj   = new TypeSlider(300,1,false);
            let galleryCell = new TypeGalleryZoomCell(rowCellsArr[j],sliderObj);
            galleryCellArr.push(galleryCell); 

            galleryCellArr[galleryCellArr.length-1].cell.onmousedown = function () {galleryCell.Deploy();};
            galleryCellArr[galleryCellArr.length-1].cell.onmouseup   = function () {galleryCell.Retract();};

         }
      }
   }