用javascript动态创建onmouseover/onmouseout函数

Create onmouseover/onmouseout functions dynamically with javascript?

本文关键字：onmouseout 函数 onmouseover 创建 javascript 动态      更新时间：2023-09-26

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

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次迭代。但是我想做的是根据我决定创建的div元素的数量(基于变量)动态创建onmouseover和onmouseout函数。

有什么办法可以做到吗?这里是上下文的所有代码(不多)，JS中有注释，解释了所有内容。我尝试自动化的部分在底部:

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

下面是我想要实现的上下文的工作示例:

http://www.ericsartor.ca/imgwide

供参考:图片是我随机挑选的，我只需要高分辨率的图片。只是为了练习而已!感谢任何可以帮助我解决这个问题的人!

我不是很懂你的代码，但我会特别回答你的问题。

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

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(立即调用的函数表达式)，例如: 
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。

一个立即调用的函数表达式(或IIFE，发音)"iffy")是一个JavaScript设计模式，它产生一个词法作用域使用JavaScript的函数作用域

这可以通过在loop中迭代所有DOM元素和绑定事件来实现。

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

试试这个片段:

var pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom,
  numOfPics = 4; //the number of div elements to create
//creates the div elements within a container div in the HTML document
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('imgContain').innerHTML += '<div id="img' + i + '" class="imgPane"></div>';
}
//used to resize all divs if the window changes size
window.onresize = function() {
  pageHeight = document.getElementById('findBottom').getBoundingClientRect().bottom;
  for (var i = 1; i <= imgClasses.length; i++) {
    document.getElementById('img' + i).style.height = pageHeight + 'px';
  }
  for (var i = 1; i <= imgClasses.length; i++) {
    document.getElementById('img' + i).style.width = 100 / imgClasses.length + '%';
  }
};
//sets the height of each div to be the mximum height of the page (without scrolling)
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('img' + i).style.height = pageHeight + 'px';
}
//makes all the divs equal percentage widths
for (var i = 1; i <= numOfPics; i++) {
  document.getElementById('img' + i).style.width = 100 / numOfPics + '%';
}
//the percentage of the page the hovered image will expand to
var expandTo = 40;
//function for when an image is hovered over
function expandCompensate(whichImg) {
  for (var i = 1; i <= numOfPics; i++) {
    if (i != whichImg)
      document.getElementById('img' + i).style.width = (100 - expandTo) / (numOfPics - 1) + '%';
  }
}
//function for when the hovered image is left to reset the widths
function expandReset() {
    for (var i = 1; i <= numOfPics; i++) {
      document.getElementById('img' + i).style.width = 100 / numOfPics + '%';
    }
  }
  (function bindEvents() {
    for (var i = 1; i <= numOfPics; i++) {
      document.getElementById('img' + i).onmouseover = (function(i) {
        return function() {
          document.getElementById('img' + i).style.width = expandTo + '%';
          expandCompensate(i);
        }
      })(i);
      document.getElementById('img' + i).onmouseout = function() {
        expandReset();
      };
    }
  })();
body,
p,
div {
  margin: 0;
  padding: 0;
}
body {} #findBottom {
  position: absolute;
  bottom: 0;
}
.imgPane {
  float: left;
  background-position: center;
  transition: width 0.25s;
}
#img1 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//1.jpg');
}
#img2 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//2.jpg');
}
#img3 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//3.jpg');
}
#img4 {
  background-image: url('http://www.ericsartor.ca/imgwide/img//4.jpg');
}
<div id="imgContain"></div>
<!-- ABSOLUTE ELEMENTS -->
<div id="findBottom"></div>
<!-- ABSOLUTE ELEMENTS -->

相关文章：