javascript - 使用 javascript 动态创建 onmouseover/onmouseout 函数？

Question

这是我需要复制的函数的示例:

document.getElementById('img1').onmouseover = function() {
    document.getElementById('img1').style.width = expandTo + '%';

    expandCompensate(1);
}

document.getElementById('img1').onmouseout = function() {
    expandReset();
}

情况是我有一个 for 循环创建一些 div 元素，并且它们的数量是动态的。截至目前，我已经创建了 4 个 div 元素，因此我为 img1、img2、img3 和 img3 创建了上述函数的 4 次迭代img4。但我想做的是根据我决定创建的 div 元素的数量动态创建 onmouseover 和 onmouseout 函数(基于变量)。

有什么办法可以做到这一点吗？这是上下文的所有代码(不多)，JS 中有注释，对所有内容都有解释。我试图自动化的部分位于底部:

https://jsfiddle.net/4w0714su/3/

这是我想要实现的目标的工作示例:

http://www.ericsartor.ca/imgwide

仅供引用:图像是我随机挑选的，我只需要高分辨率图像。这样做只是为了练习!感谢任何可以帮助我解决这个问题的人!

Answer 1

我不太明白你的代码，但我会特别回答你的问题。

你可以通过循环来实现你想要的:

for (var i = 0; i < 4; i++) {
  document.getElementById('img' + i).onmouseover = function() {
    this.style.width = expandTo + '%';
    expandCompensate(Number(this.id.replace('img', '')));
  };

  document.getElementById('img' + i).onmouseout = function() {
    expandReset();
  }
}

注意:您不能在事件处理程序的函数中使用 i 变量，因为它将始终为 4，因为它将完成循环，并且将永远不会再改变。

<小时/>

另一种方法是使用 IIFE (Immediately-invoked function expression) ，例如:

for (var i = 0; i < 4; i++) {
  (function(n) {
    document.getElementById('img' + n).onmouseover = function() {
      this.style.width = expandTo + '%';
      expandCompensate(n);
    };

    document.getElementById('img' + n).onmouseout = function() {
      expandReset();
    }
  })(i);
}

这样做时，您将当前的 i 值传递给函数，因此在该范围内，每次执行时 n 的值都将不同，例如 0、1、2 和 3。

An immediately-invoked function expression (or IIFE, pronounced "iffy") is a JavaScript design pattern which produces a lexical scope using JavaScript's function scoping.