什么是事件委托？

上次面试没回答出来，因为真的没有咋用过（哭辽）
事件代理（event delegation）：事件代理又称事件委托，是javaScript中绑定事件的常用技巧。顾名思义，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
由一个案例来引出：
现在有一个需求：点击li添加背景颜色，并排他，点哪个哪个有背景颜色

<ul>
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

 *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        li{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #000;
            box-sizing: border-box;
        }
        .selected{
            background-color: red;
        }

先来看一般做法,缺点是保存了多份onclick的函数

let oItems = document.querySelectorAll('li');
    let currentItem = oItems[0];
    for (let item of oItems){
        // item.onclick = change;
        item.onclick = function () {
            currentItem.className = '';
            this.className = 'selected';
            currentItem = this;
        }
    }

改进版

let oItems = document.querySelectorAll('li');
    let currentItem = oItems[0];
    for (let item of oItems){
        item.onclick = change;//一定不要写成了item.onclick = change();
    }

    function change() {
        currentItem.className = '';
        this.className = 'selected';
        currentItem = this;
    }

事件委托的做法：监听ul的点击，而不是直接监听li的点击，li将事件冒泡到它的父元素ul，再通过事件对象拿到当前被点击的元素

 let oUl = document.querySelector('ul');
    let oLi = document.querySelector('.selected');
    oUl.onclick = function (event) {
        event = event || window.event;//兼容所有浏览器
        oLi.className = '';
        let item = event.target;//event.target为当前点击的li
        item.className = 'selected';
        oLi = item;
    }

最后一种事件委托做法利用的是事件冒泡
事件委托的好处：
1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件而造成的内存溢出
不熟悉事件冒泡的同学，可以看我的另一篇文章
事件执行的3个阶段