JavaScript里面的事件委托

香菊网 发表于: 2019-06-03 分类: H5部分  前端front  js部分  

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

<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;
  }
}
标签: H5部分前端frontjs部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮