事件委托是利用事件冒泡机制，将本该绑定在多个子元素上的事件统一交由其共同父元素处理，父元素通过event.target精准识别触发源并执行逻辑；它解决动态添加DOM和大批量子元素时的重复绑定问题，只需一次监听、天然支持新增节点，典型代码为ul.addEventListener('click', e => { if (e.target.matches('li')) {...} })。
直接说清本质、讲对场景、带出代码逻辑，面试官最想听的是你懂原理、能落地、不背答案。
什么是事件委托？一句话定义
事件委托是利用事件冒泡机制，把本该绑定在多个子元素上的事件，统一交给它们的共同父元素处理。父元素监听事件后，通过 event.target 判断真正被点击的是哪个子元素，再执行对应逻辑。
核心就三点：
- 只绑一次监听器，不是每个子元素都绑
- 依赖冒泡（默认行为），子元素触发 → 父元素捕获
- 用 event.target 区分具体操作对象，不是 this
为什么用事件委托？两个硬需求必须点明
不能只说“节省性能”，要落到真实开发痛点：
- 动态内容场景：比如 AJAX 加载列表、todo 新增 item、表格翻页 —— 新增的 DOM 元素无需重新绑定事件，父层监听天然生效
-
大量子元素场景：100 个按钮或列表项，如果每个都
addEventListener，就是 100 次内存分配 + 100 个闭包引用；委托给<ul></ul>或<tbody>，只需 1 次 <h3>怎么写一个可靠的委托示例？关键三步不能漏</h3> <p>以点击删除列表项为例，手写代码时突出结构和判断逻辑：</p> <ul> <li>选对父容器：用 <code>document.querySelector('ul')，不是document（太宽泛，影响性能） - 监听冒泡阶段：
ul.addEventListener('click', handler)，第三个参数省略即默认false - 精准识别目标：
if (e.target.matches('button.delete')) { ... }或e.target.classList.contains('delete')，避免误触文字、空白区域
补充一句：“如果子元素调用了 e.stopPropagation()，委托就失效了——这是排查问题的重要线索。”
常被追问的延伸点，提前准备好一句话回应
面试官大概率会顺延问一两个点，不用展开，但得答准：
-
事件捕获能做委托吗？ 可以，但极少用。捕获阶段从外往内，父元素比子元素先收到事件，此时
e.target还是子元素，逻辑上可行，但不符合直觉且兼容性旧版 IE 有坑 -
委托有没有缺点？ 有。所有点击都要经过父层判断，如果判断逻辑复杂（比如深层嵌套匹配），可能轻微影响响应速度；另外，不支持没有冒泡的事件（如
focus、blur） -
和直接绑定 onclick 属性比有什么区别？
onclick是 HTML 属性，只能绑定一个函数，且无法区分target；委托用 JS 监听，支持多个监听器，也支持动态条件分支
