事件委托

原理：事件委托是利用事件流的特征解决一些开发需求的知识技巧。如果为父容器绑定事件，那么所有的子元素默认情况下都能触发这个事件，不管这个子元素是已存在，还是将来创建的，这里是复用事件冒泡的原理，为父容器绑定事件，将来所有子元素都会事件冒泡给这个父容器。这种将事件绑定给父容器的做法让子元素也能响应事件--就叫做事件委托

优点：给父级元素加事件（可以提高性能）

实现：事件对象.target可以获得真正触发事件的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        ul {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <button>添加li元素</button>
    <ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>

    <script>
        let button = document.querySelector('button')
        let ul = document.querySelector('ul')
            // 为父元素绑定事件，进行事件委托
        button.addEventListener('click', function() {
            let li = document.createElement('li')
            li.innerText = '我是新来的'
            li.classList.add('bgc')
            ul.appendChild(li)
        })

        ul.addEventListener('click', function(e) {
            // 判断所点击的子元素
            if (e.target.classList.contains('bgc')) {
                e.target.style.backgroundColor = 'orange'
            }

            e.target.style.color = 'red'
        })
    </script>
</body>

</html>