事件委托/事件代理

什么是事件委托/事件代理？
利用事件的冒泡传播机制(触发当前元素的某一个行为，它父级所有元素相关行为都会被触发)，如果一个容器中有很多元素都要绑定点击事件，没有必有一个一个的绑定了，只需要给最外层的容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。

简单应用

<div id="box">
    <span>购物车</span>
    <div id="mark" style="display: none">查看购物车中的详细信息</div>
</div>
<script>
    var mark = document.getElementById('mark');
    document.body.onclick = function (e) {
        e = e || window.event;
        e.target = e.target || e.srcElement;

        // 如果点击的是#box或者#box下的span,判断mark是否显示,显示的话让其隐藏，反之显示
        if (e.target.id === 'box' || e.target.tagName.toLowerCase() === 'span' && e.target.parentNode.id === 'box') {
            if (mark.style.display === 'none') {
                mark.style.display = 'block';
            } else {
                mark.style.display = 'none';
            }
            return;
        }

        // 如果事件源是#mark,不进行任何的操作
        if (e.target.id === 'mark') {
            return;
        }

        // 以上都不是的话，直接让#mark隐藏
        mark.style.display = 'none';
    }
</script>