JavaScript中事件委托的执行原理

 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点

 demo框架

 <ul></ul>
    <button>点击增加</button>

执行效果 

1.点击按钮 增加新元素li

   

 let ul= document.querySelector('ul')
        let btn = document.querySelector('button')
        let lis = document.querySelectorAll('li')
        btn.addEventListener('click',function(){
            let li = document.createElement('li')
            li.innerHTML = '我是新增加的li元素'
            ul.insertBefore(li,ul.children[0])
        })

2.点击元素变成蓝色

 ul.addEventListener('click',function(e){
           e.target.style.color = 'blue'
        })