JavaScript addEventListener() 未按预期工作

Question

我从未使用过addEventListener() ，但我无法为每个 <div> 编写我想要的 HTML 等效项由于我生成内容的方式，我将其视为一个按钮。等价的是:

<div onmousedown="jsItems[someId].toggleImage(someGallery, someIndex);"></div>

我一直在尝试的是:

JsTree.prototype.addGalleries = function(inElements) {
    // ...unrelated code here removed for StackOverflow...

    for (var i = 0; i < this.jsGalleries.length; i++) {
        for (var j = 0; j < this.jsGalleries[i].buttons.length; j++) {
            var self = this;
            this.jsGalleries[i].buttons[j].addEventListener("mousedown", function() {
                self.toggleImage(i, j);
            });
        }
    }
}

哪里i从 0 计数到 1 和 j从 0 到 2 计数(对于本例中的 i)，i代表someGallery , j代表someIndex ，我可以访问 someId与 this.id在上面的代码中(或者在 self.id 的函数中使用 addEventListener )。

问题是，尽管单击这些“按钮”之一(<div> s)确实会触发:

JsTree.prototype.toggleImage = function(inGallery, inIndex) {
    alert(this.id+", "+inGallery+", "+inIndex);
}

无论单击哪个按钮，它总是提醒“8,2,3”。 “8”是正确的，但我不知道为什么会警告“2”或“3”。他们似乎只比 i 多 1 个和j计数到(通过尝试 j < this.jsGalleries[i].buttons.length-1 进行验证，该警报会提示“8, 2, 2”)。

编辑:someId , someGallery ，和someIndex不是真正的变量，它们是我为了解释问题而编造的垃圾。

Answer 1

这是一个典型的 JS 错误。问题在于 i 和 j 的值未在任何函数作用域中捕获，并且您的事件处理程序是异步的。这意味着当您的事件处理程序运行时，两个 for 循环都已运行完成，因此 i == this.jsGalleries.length 和 j === this。 jsGalleries[this.jsGalleries.length - 1].buttons.length.

尝试以下其中一项:

JsTree.prototype.addGalleries = function(inElements) {
  // ...unrelated code here removed for StackOverflow...

  for (var i = 0; i < this.jsGalleries.length; i++) {
    for (var j = 0; j < this.jsGalleries[i].buttons.length; j++) {
      (function(self, innerI, innerJ){
        var galleryEl = self.jsGalleries[innerI].buttons[innerJ];
        galleryEl.addEventListener("mousedown", function() {
          self.toggleImage(innerI, innerJ);
        });
      })(this, i, j);
    }
  }
}

或者可能更清楚:

JsTree.prototype.addGalleries = function(inElements) {
  // ...unrelated code here removed for StackOverflow...

  var addHandler = function(self, i, j){
    self.jsGalleries[i].buttons[j].addEventListener("mousedown", function() {
      self.toggleImage(i, j);
    });
  };

  for (var i = 0; i < this.jsGalleries.length; i++) {
    for (var j = 0; j < this.jsGalleries[i].buttons.length; j++) {
      addHandler(this, i, j);
    }
  }
}