js綁定事件代理的坑

js經過事件代理的方式綁定跳轉事件，我這裏的邏輯是把click事件綁定在最外層container上面，若是e.target包含我已經寫好的class，則執行跳轉邏輯。可是這種方式好像只能是在點擊的元素的上面，也就是最內層的元素上面有相應的class才能跳轉，在外層加一樣的class不生效，說明是我對於事件代理的理解不夠深入，其實事件代理的做用就是爲了把目標元素的事件綁定在外層作代理，我想實現外層元素點擊，當然不可生效。

這是原來的寫法：

 document.querySelector('.container').addEventListener('click', function (e) {
            if(e.target.classList.contains('jumpUrl')){
                console.log("點擊jumpurl")
            }
        },false)

<div id="container" class="jumpUrl">
    <div id="wrap">
        <div id="s1" class="jumpUrl">s1
            <div id="s2" class="jumpUrl">s2</div>
        </div>
        <div id="s3"></div>
    </div>
</div>

 若是既想要內層元素含有jumpUrl的 class時執行點擊事件，又想要外層元素含有class時執行點擊事件，修改優化以下：

 document.querySelector('#container').addEventListener('click', function (e) {
        console.log(e.currentTarget) //得到當前綁定監聽事件的元素， container
        console.log(e.target)//得到當前點擊的元素
        console.log(this) //等於e.currentTarget
        if(e.currentTarget.classList.contains('jumpUrl')||e.target.classList.contains('jumpUrl')){
            console.log("點擊jumpurl")
        }
    },false)
    document.getElementById("container").classList.add('jumpUrl');//寫在後面也能夠綁定成功

 

注意：內層元素，即點擊的目標元素必須是點擊時真正的目標元素，而不是外面一層；

currentTarget綁定相應想要點擊的class的時候必須是作代理的即作事件監聽的元素。這裏是container