委托事件案例(以委托父容器为例)

html部分

<div class="box">
        <ul class="ul"></ul>
        <button class="btn">添加一个li</button>
        <button class="btn2">添加一个p</button>
    </div>

获取元素

<script>
        let box = document.querySelector('.box')
        let ul = box.querySelector('.ul')
        let btn = box.querySelector('.btn')
        let btn2 = box.querySelector('.btn2')

注册事件

** 给两个button注册事件，一个是在ul里新增一个li标签，另一个是在ul里新增一个p标签

 btn.addEventListener('click',function(){
            let newLi = document.createElement('li')
            newLi.innerText = '我是一个新的li标签'
            ul.appendChild(newLi)
        })
        btn2.addEventListener('click',function(){
            let newP = document.createElement('p')
            newP.innerText = '我是一个新的p标签'
            ul.appendChild(newP)
        })

委托给父容器的事件(冒泡，给父容器注册事件，利用父元素的对象的target属性查找到子元素)

//因为新增的li与p标签的元素都是ul，所以为ul注册事件
ul.addEventListener('click',function(e){                            //e为ul的事件对象
          //点击的是父容器里面的li标签，所以事件对象的target属性是li
          if(e.target.localName === 'li'){ 
          //e.target的事件
              e.target.style.color = 'red'
              console.log(e)
          }
          
          
          //同上
          else if(e.target.localName === 'p'){
              e.target.style.color = 'blue'
              console.log(e)
          }
      })