前言

代码实现

由于事件冒泡机制，一个点击事件会从我们点击的节点逐步往window上传播，从而实现内层元素实现绑定在外层元素的点击事件，也就是事件委托。 假设我们有多个li，并且要给每一个li绑定一个点击事件，让每一个li点击后颜色变红。

    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

如果不使用事件代理的话，那我们需要给每一个li都绑定一个点击事件。但是我们可以使用ul来代理li的点击事件。

let ul = document.getElementById('ul')
        ul.addEventListener('click', (e) => {
            console.log(e)
            if (e.target.nodeName === 'LI') {
                e.target.style = 'color: red'
            }
        })

其实点击事件是有一个事件参数的，我们可以打印这个事件参数看一看。

其中有非常多的属性，大家之后也可以自己去试试，我们这里主要说这个target。这个target就是我们点击到的目标元素，尽管我们是在ul身上绑定的点击事件，实际上我们直接点击的仍然是ul内部的li，也就是事件冒泡的目标元素。因此我们只需要在ul中实现让li字体变红的逻辑即可。不过要注意需要加一个判断，毕竟可能会不小心直接点击到ul身上而没点击到li身上，这时候的target也就是ul了。