在带有变量的循环中调用addEventListener
call addEventListener in loop with variable
我是JavaScript新手。我有6个元素,我想配备非常相似的事件监听器。我有一个可行的暴力解决方案,我想改进它,但(我认为)我在JavaScript闭包方面遇到了麻烦。
工作代码:
elem = document.getElementById("court1button");
elem.addEventListener("click", wassern_id1, false);
elem = document.getElementById("court1xbutton");
elem.addEventListener("click", abbrechen_id1, false);
elem = document.getElementById("court2button");
elem.addEventListener("click", wassern_id2, false);
elem = document.getElementById("court2xbutton");
elem.addEventListener("click", abbrechen_id2, false);
... 4 more times ...
function wassern_id1(event) {
wassern(1, event)
}
function wassern_id2(event) {
wassern(2, event)
}
... 4 more times ...
function abbrechen_id1(event) {
abbrechen(1, event)
}
function abbrechen_id2(event) {
abbrechen(2, event)
}
... 4 more times ...
function wassern(id, event) { ...
function abbrechen(id, event) { ...
当我发现https://stackoverflow.com/a/2520602/2536029并理解为什么它不能工作。然后我想出了下面的代码,它也不起作用,但现在我不再理解为什么它不起作用了。有人能向我解释一下并帮助我创建工作代码吗?
for (var id = 1; id <= 6; id++) {
elem = document.getElementById("court" + id + "button");
elem.addEventListener(
"click",
function(id2, event2){
wassern(id2, event2);
}(id, event),
false
);
elem = document.getElementById("court" + id + "xbutton");
elem.addEventListener(
"click",
function(id2, event2){
abbrechen(id2, event2);
}(id, event),
false
);
}
PS:问题是,调用时event
未定义
function wassern(id, event) { ... event.stopPropagation();
您需要将事件侦听器机制放入闭包中,在外行闭包中,内部函数的返回值中,您希望您的事件侦听器即使在执行循环或范围结束后也应该存在。
您需要将整个事件或getElementByid
包装在闭包中,这是的代码片段
for (var id = 1; id <= 2; id++) {
(function(id){
elem = document.getElementById("court" + id + "button");
elem.addEventListener(
"click",
function(event){wassern(id, event);},
false
);
elem = document.getElementById("court" + id + "xbutton");
elem.addEventListener(
"click",
function(event){abbrechen(id, event);},
false
);
})(id)
}
对于获取事件,您可以通过此,这是指addEventListner
内的事件
这是jsFiddle代码http://jsfiddle.net/Xtgr4/
希望以上答案对您有意义
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何从Java/scala调用js美化程序
- 如何调用这个匿名 JavaScript 函数
- 如何从模块链中调用函数.导出到节点中
- 我需要从php调用javascript或jquery
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- node.js:setInterval()正在跳过调用
- 如何在单击复选框后调用控制器方法
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 使用Google Visualization动态调用构造函数
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 调用函数内部的函数
- 函数未在Object.keys或Object.getOwnPropertyNames下列出,但可以调用
- Javascript/jQuery中的并行Ajax调用
- 同步调用,直到用户通过angular验证为访问者