注册事件的两种方法为何一错一对？
问题描述
在给 li 元素注册 onmouseover 和 onmouseout 事件时，尝试了两种方法。第一种方法正常工作，而第二种方法则报错。演示可参考：https://codepen.io/feifeiyu19…
方法一
var itemhidden = document.queryselectorall('.item_hide');var sidebarli = document.queryselectorall('#sidebar li');function setfun2(event_n1, event_n2) { event_n1.onmouseover = function () { event_n2.style.visibility = 'visible'; } event_n1.onmouseout = function () { event_n2.style.visibility = 'hidden'; } event_n2.onmouseover = function () { event_n2.style.visibility = 'visible'; } event_n2.onmouseout = function () { event_n2.style.visibility = 'hidden'; }}setfun2(sidebarli[0], itemhidden[0]);setfun2(sidebarli[1], itemhidden[1]);setfun2(sidebarli[2], itemhidden[2]);
方法二
var itemHidden = document.querySelectorAll('.item_hide');var sideBarLi = document.querySelectorAll('#sideBar li'); for (let i = 0; i < sideBarLi.length; i++) { sideBarLi[i].onmouseover = function () { itemHidden[i].style.visibility = 'visible'; } sideBarLi[i].onmouseout = function () { itemHidden[i].style.visibility = 'hidden'; } itemHidden[i].onmouseover = function () { // 方法二在这里报错了，提示：Cannot set property 'onmouseover' of undefined at window.onload itemHidden[i].style.visibility = 'visible'; } itemHidden[i].onmouseout = function () { itemHidden[i].style.visibility = 'hidden'; }}
分析
虽然两种方法最终效果相同，但第二种方法在特定情况下会报错。
原因
经过排查，发现两种方法中 li 元素和隐藏元素的数组长度不一致。
在方法一中，sidebarli 和 itemhidden 数组都只有 0, 1, 2 三个元素。而在方法二中，sidebarli 数组的长度可能会大于 itemhidden 数组的长度。
当 i 大于 itemhidden 数组的长度时，itemhidden[i] 就变成了 undefined，无法为其设置 onmouseover 事件监听器。这就导致了报错。
因此，第二种方法应该进行边界检查，确保在注册事件时不会出现越界的情况。
以上就是为 Li 元素注册事件的两种方法为何一错一对？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630291.html
微信扫一扫 
支付宝扫一扫 
