js事件委托是怎么做的

Question

比如给一个ul列表的li添加点击事件，让用户点击每个li后会backgroundColor会变红，要怎么添加事件委托给父元素ul？我的做法是
ul元素.addEventListener('click',function () {
this.style.backgroundColor = "red";
})
结果不行,正确的添加方式应该是怎么做的？

Answer 1

<script>
    var oUl = document.getElementById('ul');
    
        oUl.addEventListener('click',function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                target.style.background = 'green';
            }
        })
</script>

Answer 2

$("ul").on("click","li",function(){
      $(this).css("background-color","red");
})

追问

jq我知道怎么搞，但是js我一直没弄成功，所以我想知道用js怎么做的

追答

js的我也没弄过，研究一下，搞明白了告诉你

追问

研究出来了记得跟我说下哈

本回答被提问者和网友采纳

Answer 3

ul元素.addEventListener('click',function (xxx) {
xxx.target.style.backgroundColor = "red";
})
xxx.target就是你点击的元素