JavaScript事件注册：方法一正常，方法二报错“Cannot set property 'onmouseover' of undefined”
本文分析一个常见的JavaScript事件注册问题：两种看似相同的注册方式，一种运行正常，另一种却报错“Cannot set property 'onmouseover' of undefined”。问题出现在使用querySelectorAll选择元素后，分别为li元素及其对应的隐藏下拉列表元素注册onmouseover和onmouseout事件。目标是：鼠标悬停在li元素上显示下拉列表，移开鼠标则隐藏下拉列表。
代码使用了两种方法：方法一分别为每个元素注册事件；方法二使用循环批量注册。方法一正常运行，而方法二报错。
错误原因在于方法二中潜在的数组越界问题。querySelectorAll返回NodeList，方法二直接使用sideBarLi.length作为循环条件，未检查对应隐藏下拉列表元素数量是否一致。如果隐藏下拉列表元素数量少于li元素数量，循环访问时就会出现itemHidden[i]为undefined的情况，导致报错。方法一避免了此问题，因为它是分别注册事件，而非循环遍历。
立即学习“Java免费学习笔记（深入）”；
核心问题是querySelectorAll返回的NodeList长度可能不一致。如果#sideBar下的li元素数量多于.item_hide元素，方法二循环中i超过.item_hide元素数量时，itemHidden[i]将为undefined，引发错误。
解决方法：在方法二中添加长度判断，确保i始终在itemHidden的有效索引范围内；或者，确保sideBarLi和itemHidden的NodeList长度始终相等。 这需要仔细检查HTML结构，确保li元素和对应的隐藏下拉列表元素之间存在一一对应的关系。
