事件委托和事件绑定

先通过一个例子来引出事件委托：

　　假设有一个ul父节点，包含了很多li的子节点，点击li触发相应的事件

<ul id="parent">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>

　　我们通常的写法是为每一个li都添加一个onclick事件监听。

window.onload = function(){
　　var parent = document.getElementById('parent');
　　var children = parent.getElementsByTagName('li');
　　for(var i=0,len=children.length; i<len;i++){
　　　children[i].onclick = function(){
　　　　　　alert(this.innerHTML);
　　　　}　
　　}
}

　　如果这个ul的子元素需允许无限态的添加时，就会出现问题：

　　　　1.新添加的元素不会绑定事件，所以需要每次添加li的同时要添加绑定事件

　　　　2.绑定的事件越多，性能越差

      为了解决这个问题，可以用事件代理。更简单的方法是使用事件委托。

JavaScript中事件传播过程：

　　事件的处理流成分为三阶段：

　　　　一、事件捕获阶段：当某个元素触发某个事件时，首先会触发根元素document，然后事件将沿着dom树向下传播给目标节点的每一个祖先节点，直到目标节点。

　　　　二、目标阶段：到达目标元素之后，执行目标元素的事件处理函数

　　　　三、事件冒泡阶段：从目标元素开时，事件将沿着DOM树向上传播，直到根节点。

　　下面引用一张网上的图：　

　　　

　　那么到了正题上了，事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。

事件委托实现：

　　网上搜索有太多的例子，下面把刚开始的例子用事件委托的方法来实现。用事件委托的方法，动态添加的元素不需要再绑定事件了。

<ul id="parent">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
     <script>
        window.onload = function(){
            var parent = document.getElementById('parent');
        　    parent.addEventListener('click',function(event){
                var event = event || window.event;
                var target = event.target || event.srcElement;
                if(target.nodeName.toUpperCase() == 'LI'){
                    alert(target.innerHTML)
                }
            },false)
        }
    </script>

事件委托带来的优点：

　　1.不需要为每一个元素都添加监听事件而是通过委托给父元素来处理。这样就减少了内存，性能提高了

　　2.可以方便动态添加元素。不需要再为新添加的元素重新绑定事件。