无限下拉列表中通过事件代理监听子元素的点击

事件代理

• 用 e.target 获取触发元素
• 用 matches 来判断是否是触发元素

代码演示：

<div id="div3">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <button>加载更多...</button>
</div>

a 的点击都通过 div3 来代理

// 事件绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', event => {
    event.preventDefault() // 阻止默认行为
    const target = event.target
    if(target.nodeName === 'A'){
        alert(target.innerHTML)
    }
})

• 代码简洁

• 减少浏览器内存占用

• 但是，不要滥用