web前端面试题汇总Web前端开发

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

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

上一篇下一篇

猜你喜欢

热点阅读