js中的事件委托

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
HTML代码

<div class="box">
<ul id="list">
<li>我是标签00001</li>
<li>我是标签00002</li>
<li>我是标签00003</li>
<li>我是标签00004</li>
<li>我是标签00005</li>
</ul>
</div>

事件委托优点：
1：提高性能了。因为绑定一个处理函数比绑定多个处理函数好
2: 灵活性更好；不用每次添加元素时；都给添加元素添加事件处理函数
3: 减少了对dom的操作

JavaScript代码

// var li = document.getElementsByTagName('li')
var list = document.getElementById('list')
// 传统方式
// len = li.length;
// for (var i = 0; i < len; i++) {
// li[i].addEventListener('click', function () {
// this.style.color = '#fff'
// this.style.backgroundColor = 'blue'
// }, false)
// }
// 事件委托方式  添加click监听事件
list.addEventListener('click', function (e) {
console.log(e)
if (e.srcElement.nodeName === 'LI') {
e.srcElement.style.color = '#fff'
e.srcElement.style.backgroundColor = 'blue'
}
var li = document.createElement('li')
li.innerHTML = '我是新标签'
list.appendChild(li)
})