事件绑定、事件监听、事件委托

事件委托
事件委托就是利用冒泡的原理，把事件加到父元素或者祖先元素上，触发执行效果。
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=0; 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 = 4;
    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 = 4;
    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 = 4;
list.appendChild(li4);

其余的代码都不变