admin管理员组文章数量:1330565
I am new to JavaScript. I have a 6 elements that I want to equip with very similar event listeners. I have a working brute force solution that I want to improve, but (I think) I have trouble with JavaScript closures.
Working code:
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) { ...
I a simple loop that did not work, when I found and understand why it could not work. Then I came up with the following code, that does not work either, but now I now longer understand why it does not work. Can someone explain it to me and help me create working code?
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: the problem is, that event
is undefined during the invocation of
function wassern(id, event) { ... event.stopPropagation();
I am new to JavaScript. I have a 6 elements that I want to equip with very similar event listeners. I have a working brute force solution that I want to improve, but (I think) I have trouble with JavaScript closures.
Working code:
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) { ...
I a simple loop that did not work, when I found https://stackoverflow./a/2520602/2536029 and understand why it could not work. Then I came up with the following code, that does not work either, but now I now longer understand why it does not work. Can someone explain it to me and help me create working code?
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: the problem is, that event
is undefined during the invocation of
function wassern(id, event) { ... event.stopPropagation();
Share
Improve this question
edited Aug 29, 2021 at 13:40
Brian Tompsett - 汤莱恩
5,89372 gold badges61 silver badges133 bronze badges
asked Aug 8, 2013 at 9:06
mnagelmnagel
6,8544 gold badges34 silver badges69 bronze badges
0
1 Answer
Reset to default 9You need to put event listener mechanism inside closure, in laymen closure return value from inner function, you want your event listener should be present even after loop is executed or scope is finished.
You need to wrap whole event or getElementByid
inside closure, here is code snippet
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)
}
for getting event you can pass this, this refer to event inside addEventListner
Here is jsFiddle code http://jsfiddle/Xtgr4/
Hope above answer make sense to you
本文标签: javascriptcall addEventListener in loop with variableStack Overflow
版权声明:本文标题:javascript - call addEventListener in loop with variable - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742221878a2435496.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论