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

adding onclick to elements dynamically, passing function parameter

本文关键字：传递函数 参数 元素 添加 onclick 动态      更新时间：2023-09-26

我有一个预加载的页面，我正在尝试将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 );
    };
}

但没有用。我觉得以上无论如何都行不通。我该如何解决这个问题..？

您应该使用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>

相关文章：