使用事件委托监听和使用for循环添加监听的比较

事件委托：利用事件流的特征解决一些开发需求的知识技巧

比如给多个子级添加监听事件的时候，需要for遍历完成，利用事件委托就可以直接给父级添加监听（可以提高性能，利用事件冒泡的特点，给父元素添加事件，子元素可以触发），但是不知道是哪个子级被点击了可以获取事件对象（e.target）获取别点击的子级然后进行相应的操作。

事件委托添加监听和使用for循环添加事件监听的比较：

使用for循环添加监听事件：

像这样我们一个一个删除，循环会降低浏览器执行效率，直接给tbody加委托事件能更好的实现

for (let i = 0; i < arr.length; i++) {

document.querySelectorAll('#del')[i].addEventListener('click', function() {

tbody.innerHTML = ''

arr.splice(i, 1)

rander()

alert('我要删除了')

})

}

给标签添加一个可变的id属性：id="${i}这样我们删除数组的时候就可以根据这个id来删除对应的数组，给父级添加委托事件的时候需要注意，添加之后是给所有的子级都添加了监听，显然是不满足要求的，所以我们可以使用事件对象找到子级标签的方式判断我们点击的那个是不是我们想要的标签，是的话我们找到这个可变的id属性删除对应的数组元素，重排新的数组！！！！！跟上面for循环遍历一个一个添加监听事件要快很多且代码更优雅

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

    if (e.target.tagName === 'A') {  

        arr.splice(e.target.id, 1)  

        render()  

    }  

})