事件委托（事件代理）

什么是事件委托：

由于JS的冒泡机制，子元素触发的事件会冒泡到父元素上，事件代理就是将子元素触发的事件代理到父元素上。

举例说明：

<ul id="ul">
    <li>li标签一</li>
    <li>li标签二</li>
    <li>li标签三</li>
</ul>

需求：鼠标移动到哪个<li>标签，哪个<li>的背景颜色就变成红色

通常做法：将鼠标事件onmouseover绑定到<li>上，缺点占内存、性能较低、代码复杂度提高。

事件委托处理：将鼠标事件onmouseover绑定到<ul>上，解决通常做法的缺点。

handleEntrust = (e) => {
        var ul = document.getElementById("ul");
        ul.onmouseover = function (e) {
            // 防止鼠标移动到<ul>，且不在<li>内而触发背景颜色改变
            // 通过e.target判断当前是哪个<li>被触发
            // 老版本IE下可加e.srcElement判断当前触发元素，此处未写出
            if (e.target.nodeName.toLowerCase() == 'li') {
                e.target.style.background = 'red';
            }
        }
        ul.onmouseout = function (e) {
            if (e.target.nodeName.toLowerCase() == 'li') {
                e.target.style.background = '#fff';
            }
        }
    }

操作效果：