js事件代理的一点问题？

Question

 <ul id="UL" >
    <li id="L1" >
        L1
        <p>哈</p>
        <p>士</p>
        <p>奇</p>
    </li>
    <li id="L2" >L2</li>
    <li id="L3">L3</li>
    <li id="L4">L4</li>
</ul>

<script>
    document.getElementById("UL").addEventListener('click', function(e) {
        console.log(e.target.id);
    })
</script>

考虑到性能优化，我从原先的遍历给每个li加click事件改为用事件代理处理，
但是事件代理处理也有个问题，如上，如果我点击到P的话，就无法获取到LI的ID了，
但是在实际的生产环境中，还是经常需要用到的，但是给每个元素都加ID或者之类的标记又显得很不科学，请问有什么办法能解决吗？

Answer 1

你可以沿e.target的父节点向上找，直到e.currentTarget
判断node是否符合你的逻辑要求~~~

    document.getElementById("UL").addEventListener('click', function(e) {
        console.log(e.target.id);
        var target=e.target;
        while(target!=e.currentTarget){
            if(target.nodeName.toLowerCase()==='li'){
                //找到了
                break;
            }else{
                target=targt.parentNode;
            }
        }
        
    })