前言
在问题前，需要先理解事件冒泡、事件代理
可参考文章【事件代理】 动态数据列表里，如何监听每条数据的点击？
具体实现如下：
DOM节点：
<div id="div3">
<a href="#">a1</a><br>
<a href="#">a2</a><br>
<a href="#">a3</a><br>
<a href="#">a4</a><br>
<button>加载更多...</button>
</div>
实现逻辑：
//通用的事件监听函数
function bindEvent(elem, type, selector,fn) {
// step1.判断传参为 3 个还是 4 个
if (fn == null) {//
// 如果为3个，默认第3个赋值为函数
fn = selector
selector=null
}
// step2.做事件绑定
elem.addEventListener(type,event=>{
const target =event.target
//step3.判断是否传入selector
if (selector) {
//代理绑定 -过滤指定选择器的绑定
if (target.matches(selector)) { //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
fn.call(target,event) //call 改变this的指向，调用的事件指向当前选择的DOM元素
}
}else{
//普通绑定 -不过滤所有选择器绑定都有效
fn.call(target, event)
}
})
}
const div3 = document.getElementById('div3')
bindEvent(div3,'click','a',function(event){
event.preventDefault();
alert(this.innerHTML)
})
综上所述实现原理：
Step1.判断传参为 3 个还是 4 个
Step2.给元素添加事件绑定
Step3.判断是否传入selector，若传入，则为代理绑定，需要过滤指定选择器的绑定；若未传入，则为普通绑定 -不做过滤，所有选择器绑定都有效
