JS事件代理，如何优雅的获取子元素的下标

给一堆li标签添加事件，通常都使用js的事件代理，如果取到子元素的下标呢，

• 第一种是能过for循环来实现

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

// 绑定事件
const uls = document.querySelector('ul')
const lis = uls.querySelectorAll('li')
uls.addEventListener('click', (e) => {
    let len = lis.length,
        e = e || window.event,
        tar = e.tarte || e.srcElement
    // 通常的作法是利用for循环
    for(let i = 0; i < len; i+=) {
        let item = lis[i]
        if(item === tar) {
            console.log(i)
        }
    }
})

• 第二种利用数组上的indexOf方法, 利用Array.from方法将lis类数组转成数组

uls.addEventListener('click', (e) => {
    let len = lis.length,
        e = e || window.event,
        tar = e.tarte || e.srcElement
    // 1）这里有个地方需要注意，`index`值会出现-1的情况 ，需要做相应的处理
    let index = Array.from(lis).indexOf(tar)
    if(index < 0) return false
    console.log(index)
})

通过Array.prototype.indexOf.call(lis, tar) 也可实现相同的功能