js 事件委托

事件委托

事件委托就是利用js事件冒泡的特性，将内层元素的事件委托给外层处理。

场景：当多个li标签需要添加点击事件时

需求：当点击某个li标签，该li标签背景变红，再点击背景还原

<ul id="uid" style="cursor: pointer;">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
 </ul>

 let uid = document.getElementById('uid')
    uid.addEventListener('click', function(e){
        console.log(e)
        let target = e.target || e.srcElement
        // console.log(target)
        if (target.nodeName.toLocaleLowerCase() == 'li') {
           if (target.style.backgroundColor == 'red') {
            target.style.backgroundColor = ''
           } else {
            target.style.backgroundColor = 'red'
           }
        }
    })

 

效果