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

下面是我需要复制的函数的一个示例：

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

和

img4

创建了上述函数的4个迭代。但是我想做的是让

onmouseover

和

onmouseout

函数根据我决定创建的

div

元素的数量（基于变量）动态创建

有没有办法做到这一点？这里是所有的上下文代码（不多），JS中有注释，解释了所有内容。我尝试自动化的部分位于底部：

下面是我试图实现的工作示例：

---

仅供参考：我选择的图像是随机的，我只需要高分辨率的图像。只是为了练习！感谢所有能帮我解决这个问题的人

我不能很好地理解您的代码，但我会特别回答您的问题

您可以通过执行循环来实现您想要的：

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

值，因此在该范围内，

n

的值对于每次执行都是不同的，例如

0

、

1

、

2

和

3

立即调用的函数表达式（或IIFE，发音为 “iffy”）是一种JavaScript设计模式，它生成词法范围 使用JavaScript的函数作用域

这可以通过在

循环中迭代所有那些
DOM
元素和绑定事件来实现

当我们在
循环
中绑定事件时，当循环将被完全迭代时，事件
回调
将在稍后执行，我们需要使用
闭包
来维护当前迭代的值

请尝试以下代码段：


var pageHeight=document.getElementById（'findBottom'）.getBoundingClientRect（）.bottom，
numopics=4//要创建的div元素数
//在HTML文档中的容器div内创建div元素
对于（var i=1；i这是你代码中的
imgClasses
是什么？哦，对不起，忽略它。我用它来计算在使用JS之前我在HTML中写了多少div。我用
length
选择器来计算所有
imgPane
类。很抱歉，我认为我已经去掉了它：PAre这两种方法都有什么特别的优点/缺点吗？所以第一种方法肯定有效（非常感谢！），只是几个问题。我不完全理解为什么不能在事件处理程序中使用
I
变量…根据我的逻辑，如果它可以用来标识元素，为什么不能在函数中使用它？另外，我一直在使用
parseInt
来做你在
Number（）
中所做的事情
通常是一个更好的主意？事件处理程序在for循环的逻辑之外异步运行，并且在循环完成执行后运行。此时，我将获得循环完成运行时的值，即4。
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);
}