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

问：

对此有点尴尬，但假设我在一个名为 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);
    }

有点令人惊讶的是，无论我单击哪个子元素，此示例中的处理程序都会显示小于子元素总数的元素。但我知道总数 - 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。

我看过关于这个主题的类似帖子，例如从字符串中提取数字 （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 属性发生冲突。

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