点击ul的li，弹出处于ul中的第几条

<ul id="container">
    <li>只是第一条</li>
    <li>只是第二条</li>
    <li>只是第三条</li>
</ul>

// 事件代理方式
const ul = document.getElementById('container');
const li = document.querySelectorAll('li');
ul.addEventListener('click', function(e, index){
    const target = e.target
    // debugger
    for(let i = 0; i < li.length; i++){
        if(li[i] == target){
            alert(`当前处于ul的第${i+1}条。`);
        }
    }
});

// 普通方式
const list = document.getElementById('container').children;//获取所有的li标签
for(var i=0; i < list.length; i++){//遍历每一个li标签
    list[i].setAttribute('index',i+1); //给每一个li标签添加索引
    list[i].onclick=function ( ) {
      alert("当前处于ul的第"+this.getAttribute('index')+"条。");//获取添加的li标签的元素值
    }
}

// 闭包方式
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++) {
    lis[i].onclick = (function(i) {
        return function(){
            alert(`当前处于ul的第${i+1}条。`);
        }
    })(i);
}

来源：CSDN

作者：前端小兔子

链接：https://blog.csdn.net/qq_33084055/article/details/103832776