热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

即使数组返回节点,addEventListener也不是函数?

我意识到还有其他类似标题的问题,但我遇到了一些非常奇怪的问题。在下面的代码中,我得到一个节点数组并遍历该数组以添加事件:activateBut

我意识到还有其他类似标题的问题,但我遇到了一些非常奇怪的问题。

在下面的代码中,我得到一个节点数组并遍历该数组以添加事件:

activateButtOns= () => {
let catButtOns= document.getElementsByClassName('catalogItem')
for(i in catButtons){
console.log(catButtons[i])
catButtons[i].addEventListener('click', () => {
catButtons[i].classList.toggle('active')
if(catButtons[i].nextElementSibling){
catButtons[i].nextElementSibling.classList.toggle('show')
}
})
}
}

无论我使用 ('click', e => 还是 ('click', () =>。后来的函数使用 ('click', () => 并且在创建按钮时工作正常。

我在那里记录数组以确保它被捕获( activateButtons 在另一个构造 dom 元素的函数之后调用,该部分工作正常。在日志中我得到:

根据其他答案,我这样做是正确的 - 我将事件侦听器分配给数组中的节点,而不是数组本身。阵列显然正在组装。那么为什么我会收到这个错误呢?

在代码的其他地方,当最初创建一个新按钮时,该函数包含几乎完全相同的代码,除了我创建按钮 (document.createElement) 然后立即将其分配给按钮,而不是需要一个数组。

在加载时,已经创建的按钮从 json 文件重新实例化,当我尝试添加事件监听器时,我没有收到错误,但也没有收到事件,所以我决定添加创建按钮后,所有事件一次全部完成。我在这里缺少什么?

回答


for..in迭代原型链中任何位置的所有可枚举属性。对于 HTMLCollection,除了数字属性之外,这还会导致:


for (const i in document.getElementsByClassName('catalogItem')) {
console.log(i);
}

length, item, namedItem- 每个属性的值都不是元素(因此调用addEventListener它们会失败)。

for..of改为使用来调用 HTMLCollection 的迭代器,它只为您提供元素:

for (const button of catButtons) {
button.addEventListener('click', () => {
// ...
});
}

由于您要在循环中添加侦听器,请确保声明迭代变量 (ibutton) - 使用const; usingfor(i结果只有一个全局绑定 for i,如果您发现要检查侦听器内的变量,这将导致问题。(请参阅循环内的闭包问题)







推荐阅读
  • Android JSON基础,音视频开发进阶指南目录
    Array里面的对象数据是有序的,json字符串最外层是方括号的,方括号:[]解析jsonArray代码try{json字符串最外层是 ... [详细]
  • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
  • Java太阳系小游戏分析和源码详解
    本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
  • YOLOv7基于自己的数据集从零构建模型完整训练、推理计算超详细教程
    本文介绍了关于人工智能、神经网络和深度学习的知识点,并提供了YOLOv7基于自己的数据集从零构建模型完整训练、推理计算的详细教程。文章还提到了郑州最低生活保障的话题。对于从事目标检测任务的人来说,YOLO是一个熟悉的模型。文章还提到了yolov4和yolov6的相关内容,以及选择模型的优化思路。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • 标题: ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
  • 本文介绍了深入浅出Linux设备驱动编程的重要性,以及两种加载和删除Linux内核模块的方法。通过一个内核模块的例子,展示了模块的编译和加载过程,并讨论了模块对内核大小的控制。深入理解Linux设备驱动编程对于开发者来说非常重要。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • POCOCLibraies属于功能广泛、轻量级别的开源框架库,它拥有媲美Boost库的功能以及较小的体积广泛应用在物联网平台、工业自动化等领域。POCOCLibrai ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • 本文介绍了解决java开源项目apache commons email简单使用报错的方法,包括使用正确的JAR包和正确的代码配置,以及相关参数的设置。详细介绍了如何使用apache commons email发送邮件。 ... [详细]
author-avatar
苦蔷薇1988
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有