【亡羊补牢】JS灵魂之问第11期一道快手面试JS题引发的血案（居然又扯到了事件代理...）

引言

有几天没有更新灵魂之问的专栏系列文章了，秋招季，也在忙着备战笔试面试。今天得空再来写一篇文章，一道容易忽略的JS题，一起来看看吧。

仰望星空的人，不应该被嘲笑

题目描述

实现如下效果：当你点击 ul 下面某个 li后，打印对应索引值（可以为 0 或 1）

解决问题

一开始我就想，这不是挺简单嘛，我直接先查到所有的 li，得到所有包含 li的 list，遍历，然后给每一个 li绑定一个事件，打印当前遍历的 i 值，不就是索引了吗？

在我写完之后，面试官来了一句：那我是下面这种情况呢，有多个 ul，然后你点击某个ul里面的 li 要打印里面对应的索引值

<ul><li></li>........</ul>
<ul><li></li>........</ul>
<ul><li></li>........</ul>

我： …

面试官：提示一下，你起初的做法，是给每一个 li绑定事件，但假设有好几百个呢，那岂不是绑定几百个事件。有没有这种情况，只绑定一个事件就好了。

我：对哦，可以直接给 ul 绑定事件就好了。

面试官： show me the code！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编程题：ul底下li索引值（多个ul）</title>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      let list = document.getElementsByTagName('ul')
      for (let i = 0; i < list.length; i++) {
    
    
        list[i].addEventListener('click', (e) => {
    
    
          let target = e.target
          // console.log(target)
          if (target.tagName.toLowerCase() === 'li') {
    
    
            let liList = list[i].getElementsByTagName('li')
            // console.log(liList)
            // getElementsByTagName方法获取到的元素列表不是数组，
            // 和函数的arguments一样是一种类数组类型，不可以直接使用数组的方法。
            let idx = Array.prototype.indexOf.call(liList, target)
            /* 或者采用如下方式，将类数组转换成数组，然后使用indexOf方法 */
            // let idx = Array.from(liList).indexOf(target)
            console.log(liList)
            console.log(idx)
          }
        })
      }
    </script>
  </body>
</html>

解释一下下面这句关键代码：getElementsByTagName 方法获取到的元素列表不是数组，和函数的arguments 一样是一种类数组类型，不可以直接使用数组的方法。

let idx = Array.prototype.indexOf.call(liList, target)

既然不是数组，是类数组，我们可以直接将类数组转数组就好了，然后调用数组相关的 api

let idx = Array.from(liList).indexOf(target)

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退