如何将变量的当前值传递给事件处理程序（Javascript）

Question

对此有点尴尬，但假设我在一个名为 iBlock 的父元素中有这组“子”元素，并且在一个函数中，我正在为每个子元素添加一个“onclick”事件，就像这样...... .

someFunction(iBlock) {
    var el, iTotal = iBlock.children.length;
     for (var i= 0; i < iTotal; i++) {
             el=iBlock.children[i];
             el.onclick=function(event){myHandler(this, i)};
             }
    }

所以给定一个像这样的 onclick 处理程序...

function myHandler(elem, n) {
     alert("number is: " +  n);
    }

有点令人惊讶的是，无论我单击哪个子元素，此示例中的处理程序总是显示小于子元素总数的那个。但我知道，total - 1 是循环结束前变量“i”达到的最高数字，并且处理程序除了事件发生时变量的值之外不会传递任何内容。但是理解这并不能帮助我回答这两个问题......

1. 如果我真的希望 onclick 函数中的第二个参数传递值 'i' 实际上是 onclick 处理程序 附上，我可以传递什么来代替原始的“i”变量？
2. 由于 'i' 是由函数中的 'var' 关键字声明的 添加了处理程序，为什么它仍然有一个值（在这种情况下 总 - 1），安装功能后返回？如果处理程序显示“未定义”，我就不会那么惊讶了。我意识到 这是一个“变量范围”的问题，但我确信它是相关的。

在第一个问题上，我尝试过传递：i+'x'，只是为了将它变成一个字符串，希望它会生成一个唯一的实例。这也不起作用......并且元素“单击”只会触发显示的处理程序以显示“4x”。我还尝试创建第二个变量，作为字符串，然后提取数字部分，并将新变量中的最终“值”传递给 onclick 处理程序，就像这样......

someFunction(iBlock) {
        var el, iTotal = iBlock.children.length;
         for (var i= 0; i < iTotal; i++) {
            el=iBlock.children[i];
            var n= i+'x';  // make 'i' into a new longer string variable
            var r = /\d+/;    // regex, to capturei digits
            n = n.match(r); // convert the string to only contain the digits
            el.onclick=function(event){myHandler(this, n)};
            }
        }

没有变化。处理程序仍会在我单击的任何元素上显示 total-1。

我看过关于这个主题的类似帖子，例如Extract a number from a string (JavaScript)，但我仍然不明白我的第一个问题的补救措施。

PS（我没有尝试使用 'let' 而不是 'var' 创建变量，因为我非常致力于支持某些较旧的浏览器）。 编辑：如果可能的话，我想在那些“旧浏览器”中包含 IE-8。我意识到我不能总是这样做，但在这种情况下我愿意。

编辑：我发现了一个有趣的解决方法，即在我添加处理程序的循环中向每个元素添加我自己的变量，就像这样......

someFunction(iBlock) {
    var el, iTotal = iBlock.children.length;
     for (var i= 0; i < iTotal; i++) {
             el=iBlock.children[i];
             el.onclick=function(event){myHandler(this, i)};
             el.myIndex=i;
             }
    }

当然，在我的处理程序中，无论如何我都在传递“this”，我可以通过检查“this.myIndex”来正确恢复“i”的期望值。我听说这很危险，因为它可能会与未来的 DOM 属性发生冲突。

但这似乎是“杂牌”，所以我仍然对答案感兴趣！

Answer 1

在仔细考虑了所有提供的答案后，我将坚持使用我在 OP 的最终编辑中发现并发布的解决方案。具体来说，它在我添加事件时为每个元素分配一个新属性...

someFunction(iBlock) {
    var el, iTotal = iBlock.children.length;
     for (var i= 0; i < iTotal; i++) {
             el=iBlock.children[i];
             el.onclick=function(event){myHandler(this)};
             el.myIndex=i;
             }
    }

在这里，由于注意到的问题，我什至不再尝试将 'i' 的值作为第二个参数发送给处理程序。然而无论出于何种原因，当添加的元素“myIndex”分配给“i”时，它在分配时保留标识值。因此，当调用处理程序时，可以通过“this.myIndex”访问它。我不完全理解为什么这样做会导致 'i' 通过值而不是自身的引用/实例传递，但它确实有效。

没有人提出任何不这样做的理由，而且就添加的代码而言，它似乎是最不复杂的。我相信唯一的风险是选择一个与未来的“标准”属性相冲突的名称。也许这就是为什么我看到建议 tp call add on sttributes 类似“data-myindex”。但无论哪种方式，它似乎都适用于我尝试回到 IE8 的所有 IE 平台，Edge、Chrome 和 Firefox 也适用于最后一个为 Windows-XP 分发到最新 Win-10 的平台。它适用于 Mobil Safari 回到 IOS-7，以及我能够测试的所有 android 设备。仍然愿意接受建议，但有时，正如他们所说，“最简单的解决方案就是最好的”

Answer 2

您需要使用 IIFE 创建一个闭包来捕获迭代器变量。

More about closures

More about IIFE

function handleClick(element, n) {
    alert("number is: " +  n);
}

function iterateOverChildNOde(parentNode) {
  var el = parentNode.children
  var iTotal = parentNode.children.length;
 
  
    for (var i= 0; i < iTotal; i++) {

    (function(iterator){
      el[i].onclick=function(event){handleClick(el[iterator], iterator)};
      })(i)
  }
}

iterateOverChildNOde(document.getElementById('parent'));

<div id="parent">
  <div class="child">C</div>
  <div class="child">L</div>
  <div class="child">I</div>
  <div class="child">I</div>
  <div class="child">C</div>
  <div class="child">L</div>
</div>

另外，您需要注意这是一种不好的做法。您应该将事件处理程序附加到父元素，然后使用 e.target。

More about event delegation

  function handleClick(element, n) {
        alert("number is: " +  n);
    }

document.getElementById('parent').onclick=function(e){handleClick(e.target, Array.prototype.indexOf.call(this.children, e.target))}

    <div id="parent">
      <div class="child">C</div>
      <div class="child">L</div>
      <div class="child">I</div>
      <div class="child">I</div>
      <div class="child">C</div>
      <div class="child">L</div>
    </div>

Answer 3

如 cmets 中所述，问题在于您的内联点击处理函数引用了闭包中的变量 i，该变量在循环时会发生突变。每个处理程序都引用该循环变量，因此在循环结束时，i 被设置为 iTotal，并且所有处理程序都引用相同的值。

这可能是使用bind 函数方法的好时机。这样做是返回一个新版本的函数，其中已建立 this 上下文并预先填充了参数。

for (var i = 0; i < iTotal; i++) {
  el = iBlock.children[i];
  el.addEventListener('click', myHandler.bind(this, this, i));
}

每个el 都会收到一个独特的函数，其中前两个参数已预先填充。

Answer 4

el 没有被分配给任何东西。试试：

someFunction(iBlock) {
    var iTotal = iBlock.children.length;
    for (var i= 0; i < iTotal; i++) {
        iBlock.children[i].onclick=function(event){myHandler(this, i)};
    }
}