cvte-前端面试题-点击列表项返回其列表顺序

最新推荐文章于 2024-03-13 05:05:14 发布

chenjing9393

最新推荐文章于 2024-03-13 05:05:14 发布

阅读量708

点赞数

CC 4.0 BY-SA版权

文章标签： js 前端面试题闭包类数组

本文链接：https://blog.youkuaiyun.com/chenjing9393/article/details/68496155

本文介绍了一种常见的前端问题——点击列表项时如何获取其正确顺序，并通过闭包及事件委托来解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目是：给你一个无序列表，点击其中任意一个时返回其在列表中的顺序。下面是html片段

<ul>
    <li>点击时返回1</li>
    <li>点击时返回2</li>
    <li>点击时返回3</li>
    <li>点击时返回4</li>
    <li>点击时返回5</li>
    <li>点击时返回6</li>
</ul>

这题的常规做法是，为每个li标签绑定一个点击事件

var ul = document.getElementsByTagName("ul");
    var linodes = ul[0].getElementsByTagName("li");
    for(var i=0;i<linodes.length;i++){
        linodes[i].onclick = function () {
            alert("我是第" + i +"个");
        }
    }

基本思路是这样的对吧，但这样就会存在一个问题，你点击任意一个列表项返回的都是“我是第六个”，因为点击事件是异步的，在还没有执行点击事件时，for循环的执行速度很快，此时的 i 变量已经变成了5，故而返回的就是“我是第6个”，这个问题可以用闭包解决，如果不理解什么是闭包，请看我上一篇文章----闭包问题

 var ul = document.getElementsByTagName("ul");
    var linodes = ul[0].getElementsByTagName("li");
    for(var i=0;i<linodes.length;i++){
        linodes[i].onclick = (function (i) {
            return function () {
                alert("我是第" + (i+1) +"个");
            }

        })(i)
    }

此时你点击任意列表项时返回的就是其的顺序，即返回的匿名函数中返回的变量 i 值是实时的，这是由于虽然点击事件是异步的，但是对于函数的传参是和for循环是同步的，即点击事件发生之前，实时的变量 i 值已经传入闭包函数内了，可以自己调试的看看，看看匿名函数内部 i 值的变化。

这是常规方法 + 闭包解决这个问题，对于同时绑定同一类的点击事件，可以采用事件委托的方法，提高整体性能

var ul = document.getElementsByTagName("ul");
    var linodes = ul[0].getElementsByTagName("li");
    ul[0].addEventListener("click",function(event) {
        switch(event.target) {
            case linodes[0]:
                alert("我是第1个");
                break;
            case linodes[1]:
                alert("我是第2个");
                break;
            case linodes[2]:
                alert("我是第3个");
                break;
            case linodes[3]:
                alert("我是第4个");
                break;
            case linodes[4]:
                alert("我是第5个");
                break;
            case linodes[5]:
                alert("我是第6个");
                break;
        }
    },false);

这种方法是利用事件冒泡机制，给li元素的父元素绑定点击事件，判断事件的目标是哪个li元素，然后执行相应的程序，但是看出来了，这样用switch的写法也使得代码很累赘，参考了一下大神的做法，直接将事件目标进行匹配

var ul = document.getElementsByTagName("ul");
    var linodes = ul[0].getElementsByTagName("li");
    ul[0].addEventListener("click",function(event) {
        var target = event.target;
        if(target.nodeName.toLowerCase()==="li"){
            var txt = "我是第" + ([].indexOf.call(linodes,target)+1) + "个";
            console.log(txt);
        }
    },false);

目标元素名字进行判定的时候，需要转成小写，因为不同的浏览器的nodeName的大小写存在不同，使用indexof方法时，不能直接linodes调用，因为这个是节点列表，类数组，但不是数组，故而不能直接调用，可以用call（）方法为其指定作用域，避免了这个问题。