为 Li 元素注册事件的两种方法为何一错一对？

注册事件的两种方法为何一错一对？

问题描述

在给 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 <p><strong>分析</strong></p><p>虽然两种方法最终效果相同，但第二种方法在特定情况下会报错。</p><p><strong>原因</strong></p><p>经过排查，发现两种方法中 li 元素和隐藏元素的数组长度不一致。</p>

• 在方法一中，sidebarli 和 itemhidden 数组都只有 0, 1, 2 三个元素。
• 而在方法二中，sidebarli 数组的长度可能会大于 itemhidden 数组的长度。

当 i 大于 itemhidden 数组的长度时，itemhidden[i] 就变成了 undefined，无法为其设置 onmouseover 事件监听器。这就导致了报错。

因此，第二种方法应该进行边界检查，确保在注册事件时不会出现越界的情况。

以上就是为 Li 元素注册事件的两种方法为何一错一对？的详细内容，更多请关注其它相关文章！