使用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元素的for循環，並且它們的數量是動態的。 截至目前，我已經創建了4個div元素，因此為img1 ， img2 ， img3和img4創建了上述函數的4個迭代。 但是我想做的是根據我決定創建的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（立即調用的函數表達式） ，例如：

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的函數作用域生成詞法范圍。

Answer 2

這可以通過遍歷所有這些實現DOM元素和具有約束力的事件loop 。

當我們將事件綁定到loop ，並且當將完全迭代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 -->