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

事件代理

• 用 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);
  }
});

• 代码简洁
• 减少浏览器内存占用
• 但是，不要滥用