如何解决如何将变量的当前值传递给事件处理程序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'在循环结束之前达到的最高数字，并且处理程序除了事件发生时的变量值之外不会传递任何东西。但是理解这并不能帮助我回答这两个问题...
- 如果我真的希望onclick函数中的第二个参数传递，则在onclick处理程序被使用时，值'i'实际上是 ，我可以通过什么代替原始的“ i”变量？
- 由于在函数中，“ 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,i)};
el.myIndex=i;
}
}
然后当然在我的处理程序中，无论如何我要传递“ this”，我可以通过检查“ this.myIndex”来适当地恢复所需的“ i”值。我听说这很危险，因为它可能与将来的DOM属性发生冲突。
但是这似乎是“不合时宜”，所以我仍然对答案感兴趣！
解决方法
您需要使用IIFE创建一个闭包以捕获迭代器var。
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。
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>,
如评论中所述，问题是您的内联单击处理程序函数正在引用闭包中的变量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都会收到一个唯一的函数，该函数的前两个参数已预先填充。
el未分配任何内容。试试：
someFunction(iBlock) {
var iTotal = iBlock.children.length;
for (var i= 0; i < iTotal; i++) {
iBlock.children[i].onclick=function(event){myHandler(this,i)};
}
}
在仔细考虑了所提供的所有答案之后，我将坚持使用我发现并发布的解决方案，以对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'的值作为第二个arg发送给处理程序。但是无论出于何种原因，当将添加的元素“ myIndex”分配给“ i”时，它在分配时仍保留标识值。因此，在调用处理程序时，可以通过“ this.myIndex”对其进行访问。我不完全理解为什么这样做会导致“ i”通过值而不是自身的引用/实例进行传递，但是它起作用。
没有人提供任何理由不这样做，而且就添加代码而言，这似乎是最简单的。我相信唯一的风险是选择一个与将来的“标准”属性冲突的名称。也许这就是为什么我看到建议在tp调用上添加诸如“ data-myindex”之类的东西的原因。但是无论哪种方式，它似乎都可以在我尝试过的IE8上运行的所有IE平台，也可以在Edge，Chrome和Firefox上运行，直到通过Win-10上的最新版本为Windows-XP发行的最后一个都可以。它可以在回到IOS-7的Mobil Safari上运行，并且可以测试所有的android设备。仍然可以接受建议，但有时，正如他们所说的那样，“最简单的解决方案是最好的解决方案”
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
