案例:委托事件

157 阅读1分钟
<script>
    //获取父元素
    let ul = document.querySelector('ul')
    //获取按钮
    let button = document.querySelector('button')
    //绑定按钮单点事件
    button.addEventListener('click', function () {
      //增加新的li
      let newli = document.createElement('li')
      //新的li的内容
      newli.innerText = '我是新来的'
      //增加在ul里面
      ul.appendChild(newli)
    })
    //设置单点ul里的事件
    ul.addEventListener('click', function (e) {
      //输出e,寻找可以用的元素
      console.log(e);
      //如果点击的元素里带li,就会触发事件
      if (e.target.localName == 'li') {
        //事件为变成红色
        e.target.style.color = 'red'
      }
    })
  </script>

事件委托案例讲解:
首先获取父元素和按钮,然后添加绑定按钮的添加事件,然后增加新的li,以及里面的内容,把他放在ul里面,然后再设置单点ul事件会触发输出再做一个判断即可,判断是否点击,如点击就会输出样式变成红色。