Javascript之事件的委託

一、什麼是事件的委託/事件代理

    利用了事件的冒泡傳播機制(觸發當前元素的某個行爲，它父級全部元素的相關行爲都會被觸發)，若是一個容器中有不少元素都要綁定點擊事件，咱們沒有必要一個個的綁定了，只須要給最外層的容器綁定一個點擊事件便可，在這個方法執行的時候，經過事件源的區分來進行不一樣的操做；

 

案例：

body, div, span {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#box {
    position: absolute;
    left: 50%;
    top: 51px;
    width: 100px;
    height: 30px;
    margin-left: -50px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #2489ce;
}

#mark {
    position: absolute;
    top: 30px;
    left: -1px;
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: lightyellow;
    border: 1px solid #2489ce;
}

<div id="box">
    <span>購物車</span>
    <div id="mark" style="display: none;">查看購物車中的詳細信息</div>
</div>

<script type="text/javascript">
    var box = document.getElementById('box');
    var mark = document.getElementById('mark');

    document.body.onclick = function (e) {
        e = e || window.event;
        e.target = e.target || e.srcElement;

        //若是點擊的是box或者是box下的span,咱們判斷,ark是否顯現,或者隱藏
        if(e.target.id === 'box' ||
                e.target.tagName.toLocaleLowerCase() === "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.style.display = 'none';
    }

</script>