为什么无法通过Javascript遍历
  • 列表并分配事件（onitemclick）处理程序？

    • 20 浏览
    0 Comments

    为什么无法通过Javascript遍历
  • 列表并分配事件（onitemclick）处理程序？

    • 当有人点击列表上的li项目时，我的任务是切换“done”属性。我发现了其他的方法，但是这个方法对我无效，我渴望理解为什么。我的代码有什么问题？难道不能像这样分配处理程序，或者我的代码中还有其他问题吗？\n

    var liList = document.querySelectorAll("li");
for (var i = 0; i < liList.length; ++i){
    liList[i].onItemClick = function() {
    liList[i].classList.toggle("done");
    }
}

    \n

      
   
    • 笔记本
      • 
   
    • 果冻
      • 
   
    • 菠菜
      • 
   
    • 米饭
      • 
   
    • 生日蛋糕
      • 
   
    • 蜡烛
      •

    0

    3 答案

    0 Comments

    问题的原因是因为代码中使用的是错误的属性名，应该使用e.currentTarget而不是e.currentTaget。正确的代码应该是：

    liList[i].onclick = function(e) {
  console.log(e.currentTarget);
}

    解决方法：

    将代码中的e.currentTaget替换为e.currentTarget即可解决该问题。代码修改后的正确形式为：

    liList[i].onclick = function(e) {
  console.log(e.currentTarget);
}

    这样，当点击

  • 元素时，控制台将输出当前点击的元素。

    • 0
    0 Comments

    问题的原因是使用了箭头函数（arrow function）作为事件处理程序。箭头函数没有自己的this值，而是继承自包围它的函数或代码块的作用域。因此，在上述代码中，箭头函数中的this指向全局对象，而不是被点击的li元素。

    解决方法是使用普通的函数表达式而不是箭头函数作为事件处理程序。普通函数表达式中的this值将自动指向触发事件的元素。

    修正后的代码如下：

    var liList = document.querySelectorAll("li");
for (var i = 0; i < liList.length; ++i){
    liList[i].addEventListener("click", function() {
        this.classList.toggle("done");
    });
}

    感谢你，它像我想要的那样工作了。我只想问一下 - 在JavaScript中使用"this"的规则是什么？每次我将一个函数分配给事件处理程序时，"this"会引用被点击/悬停等的对象吗？

    基本上，'this'关键字在点击事件中引用当前循环内的元素。

    0
    0 Comments

    是的，每当某个变量“持有”一个对象时，改变这个变量就会改变对象本身。非常感谢您的帮助！

    0