【事件代理】 动态数据列表里,如何监听每条数据的点击?
2020-05-25 本文已影响0人
loushumei
前言
在问题前,需要先清楚关于事件冒泡、事件代理的定义
事件冒泡
基于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.触发元素