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

本篇文章给大家分享《为 Li 元素注册事件的两种方法为何一错一对？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

问题描述

在给 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 元素注册事件的两种方法为何一错一对？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！