事件委托

事件委托

事件委托：把子元素的事件委托给父级元素让父级元素代替子元素完成这件事

事件委托实现原理：

事件冒泡和事件源对象来实现
事件冒泡实现委托作用
事件源对象作用获取事件目标对象（换句话；获取触发事件的元素对象）​

​ 论证过程：

因为事件的作用的实现用户和浏览器交互的过程，没有事件,浏览器是不会知道用户对浏览器做了哪些事情。所以在使用浏览器时候，浏览器默认情况就会有所有的事件。因而元素中也有很多默认的事件事件是在用户做了某些操作时候被触发的。而我们给某个元素对象绑定事件的目的，是为了让用户在触发这个事件时候，告诉浏览器去完成一些工作。
​ 又因为，只要事件被触发；就会出现对应的事件模型，
​ 又因为；事件委托；通常委托给父元素；所以被委托对象为父元素
​ 所以综上所述：证明了事件委托实现的过程，
​ 注意区分：容易混的点，事件只要被触发就会有事件对象记录触发事件的所有信息。是谁触发的，在哪触发；都可以看到。

  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)
        // }
        //  事件委托方式  
        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)
        })