提出问题
下面代码中，需要绑定多个删除按钮，传统方式绑定，就不合理，具体如下：
html：
dataId是该条记录在数据库中的id<br>
李雷 <a href="javascript:void(0)" id="a1" dataId="1">删除</a><br>
韩梅梅 <a href="javascript:void(0)" id="a2" dataId="2">删除</a><br>
lucy <a href="javascript:void(0)" id="a3" dataId="3">删除</a><br>
lili <a href="javascript:void(0)" id="a4" dataId="4">删除</a><br>
css：
<style>
a{
color: green;
text-decoration: none;
}
</style>
JavaScript：
<script>
// 占用浏览器内存，绑定函数太多影响性能，也不合理
document.getElementById("a1").onclick = function(){
console.log("点击",this.id)
console.log("dataId:",this.getAttribute("dataId"))
}
document.getElementById("a2").onclick = function(){
console.log("点击",this.id)
console.log("dataId:",this.getAttribute("dataId"))
}
document.getElementById("a3").onclick = function(){
console.log("点击",this.id)
console.log("dataId:",this.getAttribute("dataId"))
}
document.getElementById("a4").onclick = function(){
console.log("点击",this.id)
console.log("dataId:",this.getAttribute("dataId"))
}
</script>
绑定函数太多，占用浏览器内存，影响性能，代码重复太多，也不合理
解决：事件委托
事件委托
事件代理（Event Delegation），又称事件委托。
把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。
事件代理的原理是DOM元素的事件冒泡，点击子元素时没有相应事件，在父元素上作出响应
好处
减少DOM操作，提高性能。如果20个以上的子元素都加上相同事件，性能会越来越差
随时可以添加子元素，添加的子元素会自动有相应的处理事件。
案例
html：
delId是该条记录在数据库中的id<br>
<div id="box" style="border: 1px red solid;">
李雷 <a href="javascript:void(0)" delId="1">删除</a><br>
韩梅梅 <a href="javascript:void(0)" delId="2">删除</a><br>
lucy <a href="javascript:void(0)" delId="3">删除</a><br>
lili <a href="javascript:void(0)" delId="4">删除</a><br>
</div>
css：
<style>
a{
color: green;
text-decoration: none;
}
</style>
JavaScript：
<script>
document.getElementById("box").onclick = function(e){
console.log("触发事件的dom对象：",e.target)
let delId = e.target.getAttribute("delId")
// console.log("delId:",delId)
// 如果 delId不为null说明点击的是删除 a标签，否则表示删除其他标签，不处理
if( delId !== null ){
console.log("模拟发送ajax的代码，向服务器发送请求，携带参数：dataId：",delId)
}
}
</script>