addEvenListener不'我不研究动态javascript

addEvenListener doesn't work on dynamic javascript

本文关键字：动态 javascript addEvenListener      更新时间：2024-05-23

所以我目前正忙于学习JavaScript。我创建了一些动态按钮，并试图添加一个addEvenListener。但它不起作用，我也不明白为什么它不起。我只是在测试一些东西，并尝试使用本地存储中的值创建按钮。它几乎可以工作，只有addEvenListener不工作。我只想要一个简单的警报，其中包含来自本地存储的密钥。

for (var i = 0; i <= localStorage.length-1; i++) {
    var categoryButton = document.createElement('input');
    categoryButton.setAttribute('class', 'forumMenu');
    categoryButton.setAttribute('type', 'button');
    categoryButton.setAttribute('name', localStorage.key(i));
    categoryButton.setAttribute('value', localStorage.key(i));
    categoryButton.setAttribute('id', localStorage.key(i));
    categoryButton.addEventListener('click', function(col){
    alert(col);
}(localStorage.key(i)),true);
    forumMenu.appendChild(categoryButton);
}

有人知道为什么它不起作用吗？

您没有将函数传递给EventTarget.addEventListener()。您立即执行并传递以下结果：

function (col) {
  console.log(col);
}(localStorage.key(i))

即CCD_ 2。您可以使用以下语法对此进行修改：

categoryButton.addEventListener('click', (function(col) { 
   // return a function to addEventListener
   return function(){
      console.log(col);
   }
})(localStorage.key(i)),true);

这里有一个演示：

var input;
for (var i = 0; i <= 5; i++) {
  input = document.createElement('input');
  input.type = "button"
  input.value = i;
  input.addEventListener('click', function(i) {
    // return a function to addEventListener
    return function() {
      console.log(i);
    }
  }(i), true);
  document.body.appendChild(input);
}

您将值存储在id属性中，所以只需使用它：

 for (var i = 0; i <= localStorage.length-1; i++) {
    var categoryButton = document.createElement('input');
    categoryButton.setAttribute('class', 'forumMenu');
    categoryButton.setAttribute('type', 'button');
    categoryButton.setAttribute('name', localStorage.key(i));
    categoryButton.setAttribute('value', localStorage.key(i));
    categoryButton.setAttribute('id', localStorage.key(i));
    categoryButton.addEventListener('click', function () {alert(this.getAttribute('id'));});
 document.body.appendChild(categoryButton);
 }

在事件处理程序中，this引用<input>元素本身，因此您只能检索属性值。

这是因为您将事件侦听器分配给一个不在DOM中的对象（这是因为在加载DOM后创建了此元素）

试试这个：

categoryButton.onclick = function(col){
    alert(col);
}

您可以向var声明一个函数，然后将该函数重新分配给事件处理程序：

var myFunction = function(){
    alert("I'm a function");
}
myElement.onclick = myFunction;
相关文章：