事件綁定、事件監聽、事件委托

事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或者祖先元素上，觸發執行效果。

html代碼：

<ul id="list">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
</ul>
           

js代碼：

<script type="text/javascript">
    var list = document.getElementById("list");
    var oLi = document.getElementsByTagName("li");
    //傳統方法：給每一項綁定事件
    for( var i=; i<oLi.length; i++){
        oLi[i].index = i;
        oLi[i].onclick = function(){
            var i = this.index;
            console.log(i);
        }
    }

    var li4 = document.createElement("li");
    li4.innerHTML = ;
    list.appendChild(li4);

</script>
           

看一下上例代碼會不會出現什麼問題？why

我們會發現，新增的第四個li，點選之後沒有什麼效果， 說明了什麼問題?

說明了普通時間添加在新增的元素上是無效的，我們該如何解決？

這時主角–事件委托就應該出現了。

<script type="text/javascript">
    var item1 = document.getElementById("item1");
    var item2 = document.getElementById("item2");
    var item3 = document.getElementById("item3");

    document.addEventListener("click",function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        //console.log(target);
        if( target == item1 ){
            console.log(item1.innerHTML);
        }else if( target == item2 ){
            console.log( item2.innerHTML);
        }else if( target == item3 ){
            console.log( item3.innerHTML );
        }else{
            console.log( item4.innerHTML );
        }
    })
    var li4 = document.createElement("li");
    li4.setAttribute("id","item4");
    li4.innerHTML = ;
    list.appendChild(li4);

</script>
           

代碼簡潔一下：

document.addEventListener("click",function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
    if( target.nodeName == "LI"){
        console.log(target.innerHTML);
    }
})
var li4 = document.createElement("li");
li4.setAttribute("id","item4");
li4.innerHTML = ;
list.appendChild(li4);
           

其餘的代碼都不變