JavaScript里面的事件委托

Xuanmo  发表于: 2018-03-12 12:52:13  分类: JavaScript  423  4

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


<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;
  }
}

在线展示

  • 16人 Love
  • 3人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、js事件委托

作者简介:Xuanmo

打赏

生命的意义在于折腾。

共 4 条评论关于 “JavaScript里面的事件委托”