事件委托

解释事件委托之前先了解，事件冒泡还有事件捕获

css:
  .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: relative;
        }

        .son,
        .sister,
        .other {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .son {
            z-index: 1;
        }

        .sister {
            width: 200px;
            height: 200px;
            background-color: #ff0;
        }

 <div class="box">
        <div class="sister">
            <div class="son"></div>
        </div>
    </div>
    <script>
        let box = document.querySelector('.box')
        let son = document.querySelector('.son')
        let sister = document.querySelector('.sister')
        box.addEventListener('click', function () {
            console.log('box');
        })
        son.addEventListener('click', function () {
            console.log('son');
        })
        sister.addEventListener('click', function () {
            console.log('sister');
        })
    </script>

事件捕获

就好像是剥洋葱一样，一层一层的往下面找。最终找到我们要的元素，在事件触发时候就是这样，找到触发的事件的元素停止。一层一层往下面传递的过程

事件冒泡

就好像是水下面的鱼吐泡泡，一个接一个往上面冒泡。一层一层往上面传递的过程

冒泡、捕获代码执行过程

我都点击son这个盒子 1、我们执行代码看看，我们在给son、sister、box绑定了点击事件

结果是三个都会触发的

2、把sister点击事件变成了鼠标滚（scroll）动作事件，看一下会不会触发

        sister.addEventListener('scroll', function () {
            console.log('sister');
        })

结果是不会的，触发的 3、addEventListener里面可以传入第三个参数，这个参数就是决定了。在什么时候触发，默认的false（冒泡时候触发）。true（捕获）

        sister.addEventListener('click', function () {
            console.log('sister');
        }, true)

4、我们把son和sister是兄弟关系

    <div class="box">
        <div class="sister">
        </div>
        <div class="son"></div>
    </div>

这里触发了son还有box,并没有触发sister

总结就是事件委托的要注意的细节

1、事件委托必须要绑定同样的事件，才能被触发

2、事件委托是在冒泡或者说捕获阶段上面的， 没有冒泡和捕获就没有事件委托

3、事件委托必须要是父子关系

事件委托概念：

就是将本来需要 A 处理的事情，委托给 B 来处理。 就好像是你有车给卖车的4s店，帮你去卖一样。

为什么需要事件委托：

这里一开始什么都没有，没有商品我们操作的全部在商品里面

我们给下面的商品添加功能，增删改查会直接报错的。因为没有这个元素，都获取不到，就报错了。元素没有不是错，但是你给没用的添加事件就会报错给你的。

那么这个时候就会用到事件委托了，我们给最近一级父元素绑定事件就可以了

我们可以节约获取元素的代码

这里给每一个li添加事件绑定，就会非常多的代码

直接给ul添加事件就会节约很多代码了

事件委托格式

事件委托是给整一个父盒子添加事件，那么点击整一个父盒子都会触发。这是我们不需要的，那么就需要一个判断满足条件才触发我们要的事件就可以了。这个判断条件就在

add里面传过去的参数里面e，e是一个对象里面有一个属性target是我们需要的

carBody.addEventListener('click', function (e) {
  if (e.target.className == 'add') {
    // 我们点击之后让数组的count进行++ 然后重新渲染还有计算总价
    data[e.target.id].count++
} 
})

就是这个格式if里面判断就是需要触发事件的元素的类名就可以了