前言

事件委托（事件代理）是绑定点击事件常用的一种手法，就是将子元素的事件委托给父元素或者说是父元素代理子元素的点击事件，他的实现原理是js的事件冒泡机制，我在我之前的文章有写过，有兴趣了解的同学们可以看一下。JavaScript事件触发过程底层原理 - 掘金 (juejin.cn)

代码实现

由于事件冒泡机制，一个点击事件会从我们点击的节点逐步往window上传播，从而实现内层元素实现绑定在外层元素的点击事件，也就是事件委托。

假设我们有多个li，并且要给每一个li绑定一个点击事件，让每一个li点击后颜色变红。

js 复制代码

    <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的点击事件。

js 复制代码

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了。