如何解决单击事件的 addEventListener 被覆盖
我对 HTML/JS 还很陌生,我正在努力学习所有奇怪的东西。在尝试使其工作时,我了解到只允许一个 Element.onclick = function() {}
并且如果您尝试添加更多先前的将被覆盖。但是现在我使用 Element.addEventListener("click",function() {})
也面临着同样的问题。这是我的代码:
<html>
<body id="body">
</body>
</html>
<script>
window.onload = function() {
for (var buttonText of ["item1","item2","item3"]){
var button = document.createElement("button");
button.textContent = buttonText;
button.addEventListener("click",function(){
console.log(`${buttonText} was clicked!`);
});
document.getElementById("body").append(button);
}
}
</script>
无论点击哪个按钮,控制台总是显示 item3 was clicked!
。我哪里出错了?
解决方法
它与变量的作用域有关。 addEventListener
将添加一个事件,此时虽然回调将触发,但循环已完成执行,buttonText
将更新为最新值。这导致 buttonText
始终为 item3
。一种选择是将 for (var buttonText of ["item1","item2","item3"]) {
替换为 for (let buttonText of ["item1","item3"]) {
window.onload = function() {
for (let buttonText of ["item1","item3"]) {
let button = document.createElement("button");
button.textContent = buttonText;
button.addEventListener("click",function() {
console.log(`${buttonText} was clicked!`);
});
document.getElementById("body").append(button);
}
}
<div id='body'></div>
另一种选择是您可以创建一个 closure
和一个 IIFE
window.onload = function() {
for (var buttonText of ["item1","item3"]) {
// start of IIFE
(function(txt) {
var button = document.createElement("button");
button.textContent = txt;
button.addEventListener("click",function() {
console.log(`${txt} was clicked!`);
});
document.getElementById("body").append(button);
}(buttonText))
}
}
<div id='body'></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。