事件委托在无限加载列表中负责统一处理动态插入的li元素的交互事件，避免重复绑定；无限加载则通过滚动监听和占位符可见性判断触发数据加载，二者职责分离、协同工作。
事件委托本身不直接用于“无限加载”，它负责处理用户交互（比如点击、删除），而无限加载依赖滚动监听和 DOM 可见性判断。但两者常共存于同一列表场景中，容易混淆。关键要分清：委托管“点哪了”，无限加载管“滑到哪了”。
事件委托在无限加载列表里起什么作用
无限加载的 ul 列表往往持续追加新 li —— 这些新项是 JS 动态插入的，不是初始 HTML。如果给每个 li 单独绑定 click、delete 或 like 事件，每次新增都要重复绑定，既冗余又易漏绑。用事件委托，只需在 ul 上绑定一次，所有现有和未来插入的 li 都能响应操作。
- 用户点击某条新闻项跳转详情 → 用
event.target.closest('.news-item')捕获目标，读取data-id - 点击某条消息右侧的“删除”按钮 → 委托监听 ul，检查
event.target.matches('.btn-delete')，再向上找最近的 li 获取上下文 - 点赞图标是嵌套在 li 内的
<svg>，点击时仍能通过closest('li')定位所属条目
无限加载本身怎么触发（不靠委托）
它靠的是监听滚动 + 检测底部占位符是否进入视口，和事件委托无关：
- 在 ul 后放一个空 div，如
<div class="infinite-trigger"></div> - 监听 window 或容器 scroll，调用
trigger.getBoundingClientRect() - 当
top <= window.innerHeight且未在加载中，就请求下一页数据 - 拿到新数据后，用
ul.insertAdjacentHTML('beforeend', newLiHTML)插入，无需任何额外绑定
两者如何配合工作
一个典型流程：
- 页面初始化：渲染前 10 条，ul 绑定一次 click（委托）；同时设置 infinite-trigger 并监听 scroll
- 用户下滑到底部 → 触发加载 → 插入 10 条新 li → 这些新 li 自动响应已存在的委托逻辑
- 用户点其中任意一条的“分享”按钮 → 委托回调识别该按钮，再用
closest('li').dataset.id获取对应数据，发起分享请求
写法示例（精简可运行）
HTML：
<ul id="article-list"></ul><div class="infinite-trigger"></div>
JS：
const list = document.getElementById('article-list');const trigger = document.querySelector('.infinite-trigger');
// ✅ 事件委托：统一处理所有 li 及其子控件
list.addEventListener('click', e => {
const item = e.target.closest('.article-item');
if (item) {
console.log('点击文章:', item.dataset.id);
}
const delBtn = e.target.closest('.del-btn');
if (delBtn) {
const itemToDelete = delBtn.closest('.article-item');
itemToDelete.remove();
}
});
// ✅ 无限加载：只监听滚动与占位符
const loadMore = () => { /* 请求下一页 */ };
const onScroll = () => {
const rect = trigger.getBoundingClientRect();
if (rect.top <= window.innerHeight && !loading) {
loading = true;
loadMore().finally(() => loading = false);
}
};
window.addEventListener('scroll', onScroll);
