JavaScript-----事件委托

二.事件委托的原理:

三.事件委托的作用:

四.事件委托的核心原理;

举个栗子:

举个栗子:

如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

    <ul>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
    </ul>
</body>
<script>

    //获取元素
    var ul = document.querySelector("ul");
    ul.addEventListener('click', function (e) {
        alert('hhh')
    })

栗子2:

    <ul>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
        <li>橘子红了</li>
    </ul>
</body>
<script>

    //获取元素
    var ul = document.querySelector("ul");
    ul.addEventListener('click', function (e) {
        // alert('hhh')
        // e.target  可以得到点击的对象
        e.target.style.backgroundColor = 'pink'
    })