Xuanmo Blog

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。更多资料传送门>>

<ul>
  <li class="add">添加</li>
  <li class="remove">删除</li>
</ul>

最常见的一个功能就是有许多个元素，然后用循环去给每个元素绑定一个事件，如果元素多了，用循环就不是很友好，循环dom元素的方法：

let aLi = document.querySelectorAll('li');
for (let i = 0, length = aLi.length; i < length; i++) {
  aLi[i].onclick = function () {
    // code
  }
}

利用事件委托实现，IE还需要写一下兼容代码，下边是个简单的demo：

document.querySelector('ul').onclick = function (event) {
  switch (event.target.className) {
    case 'add':
      let oLi = document.createElement('li')
      oLi.innerText = '我是被添加的li'
      this.appendChild(oLi)
      break;
    case 'remove':
      this.lastElementChild == event.target ? alert('请先添加一个元素在操作') : this.removeChild(this.lastElementChild)
      break;
  }
}

在线展示