【九月打卡第2天】事件委托

  <ul class="list">

    <li>n</li>

    <li>n</li>

    <li>n</li>

    <li>n</li>

    <li>n</li>

  </ul>

  <div class="btn-list">

    <button data-active='new'>新建</button>

    <button data-active='search'>搜索</button>

    <button data-active='delete'>删除</button>

  </div>

  <script>

    var btnListEl = document.querySelector('.btn-list')

    btnListEl.addEventListener('click', function (e) {

      var action = e.target.dataset.active

      switch (action) {

        case 'new':

          console.log('点击了新建')

          break

        case 'search':

          console.log('点击搜索')

          break

        case 'delete':

          console.log('点击了删除')

          break

        default:

          console.log('位置action')

      }

    })

  </script>