JavaScript事件委托

事件委托机制原理

利用事件冒泡传播机制完成。（mouseenter、mouseleave等不会冒泡）
什么是事件冒泡？
事件冒泡：结构上嵌套关系的元素（非视觉上），会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。
例：
假如界面中存在这样一个嵌套关系：

   <div id="red">
        <div id="blue">
            <div id="green">
            </div>
        </div>
    </div>

设置样式便于观察：

拿到三个div对应的dom元素，为其添加点击事件：

    var red = document.getElementById('red');
    var blue = document.getElementById('blue');
    var green = document.getElementById('green');

    red.onclick = function () {
        console.log('red onclick');
    }    
    blue.onclick = function () {
        console.log('blue onclick');
    }
    green.onclick = function () {
        console.log('green onclick');
    }

当点击红色区域，即最外层div时，该div嵌套在内的元素事件（即子元素事件）是不会被触发的：

此时只触发red事件。

当点击蓝色区域，其父元素red也有点击事件，所以此时会因为事件冒泡机制，在触发blue点击事件后会触发red的点击事件：

同理，当点击绿色区域，其父元素red和blue点击事件也会被触发：

利用这个特性，我们可以为一个目标元素（事件源）的父元素添加一个触发事件，这样就无需给目标元素添加事件，统一绑定到其父元素身上；即把目标元素的事件委托到其父元素身上。

应用场景：
当一个容器内有很多元素都要为同一件事件绑定方法，这时只需要给外层容器的该事件绑定这个方法，当里层元素触发这个事件时，会通过事件冒泡传播机制传到最外层容器，触发外层容器绑定的方法。在方法执行时，只需根据判断事件源的不同而做不同的事情。

优势：

• 利用事件委托大大提高了性能。
• 适合动态元素的事件绑定，新添加的子元素会有监听函数，也可以有事件触发机制。