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

本文链接：https://blog.youkuaiyun.com/express_yourself/article/details/106340822

本文深入探讨了事件冒泡机制及其在事件代理中的应用，通过实例解析了如何利用事件代理简化代码，减少内存占用，并实现动态绑定事件，适用于新增元素的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

事件冒泡

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