javascript - 动态添加 onclick 到元素，传递函数参数

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我有一个预加载的页面，我正在尝试将 onclick 事件添加到具有特定类名的所有节点。但是onclick中的函数应该使用其中的元素节点。

var elemArr=document.getElementsByClassName('ABC');

    for(var i=0;i<elemArr.length;i++){

        elemArr[i].onclick = function()
        {
            console.log(elemArr[i]);  // This is being returned as undefined
            // How can I use elemArr[i] here 
        };
    }

我试过了

for(var i=0;i<elemArr.length;i++){

    printObj=elemArr[i];
    elemArr[i].onclick = function()
    {
        console.log(printObj);
        var newObject = jQuery.extend(true, {}, printObj);
        console.log(newObject );
    };
}

但是没有用。我觉得上面的方法无论如何也行不通。我该如何解决这个问题..？

Answer 1

您应该使用 function 将代码包装在 loop 内，以便为每个事件处理程序创建 i 的新副本，像这样。

var elems = document.getElementsByClassName('elem');

if (elems.length) {
  for (var i = 0, l = elems.length; i < l; i++) {
    (function(i) {
      elems[i].onclick = function() {
        alert('Element #' + i);
      }
    })(i);
  }
}

// Could also use bind for slighlty cleaner code
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

for (var i = 0, l = elems.length; i < l; i++) {
  elems[i].onmousedown = (function(index, e) {
    console.log('MouseDown - Element  #' + index);
  }).bind(elems[i], i);
}

<div class="elem">Elem #1</div>
<div class="elem">Elem #2</div>
<div class="elem">Elem #3</div>