前言
在问题前，需要先清楚关于事件冒泡、事件代理的定义
事件冒泡
基于DOM树形结构
事件顺着触发元素往上冒泡
应用场景：事件代理
事件代理
原理： 事件冒泡机制
实现方式：可用addEventListener(); //所有主流浏览器，除了IE8及更早IE版本。
特点：
代码简洁，把事件处理器添加到一个父级元素上，避免了把事件处理器添加到多个子级元素上。
大量减少内存占用， 减少事件注册。
适用新增元素实现动态绑定事件。
具体实现如下：
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>
实现逻辑：
给每个a标签添加点击事件
//事件绑定方法
function bindEvent(elem,type,fn) {
elem.addEventListener(type,fn)
}
//获取父级元素
const div3=document.getElementById('div3')
给父级元素添加绑定事件
bindEvent(div3,'click',event=>{
event.preventDefault();
const target=event.target
//通过event.target判断是否是a标签
if (target.nodeName == 'A') {
//给符合要求的元素添加事件
alert(target.innerHTML)
}
})
综上所述实现原理：
Step1.给父级元素添加事件代理
Step2.通过event.target判断是否是当前需要绑定的元素
Step3.触发元素
