【事件代理】 动态数据列表里，如何监听每条数据的点击？

前言

在问题前，需要先清楚关于事件冒泡、事件代理的定义

事件冒泡

基于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.触发元素