事件委托依赖事件冒泡和event.target，click等可冒泡事件可用，focus/blur需改用focusin/focusout；安全委托应限定父容器、用matches()匹配目标、避免stopPropagation打断冒泡路径。
事件委托不是“加个 onclick 就行”，而是靠 event.target 和事件冒泡机制把监听逻辑从子元素上收上来——只要父容器存在且稳定，动态增删的子节点自动生效，不用反复绑定。
为什么 click 事件能委托，focus 却不行？
因为 click、mousedown、keyup 等事件会完整冒泡到 document，而 focus、blur 默认不冒泡（得用 focusin/focusout 才行）。
- 常见错误：给
ul绑focus监听器，点里面input没反应 → 改用focusin -
mouseenter/mouseleave也不冒泡，不能委托；换成mouseover/mouseout才可以 - 移动端
touchstart可委托，但注意click有 300ms 延迟，建议优先用touchstart
怎么写一个安全的事件委托函数？
别直接在 document 上监听所有 click，容易冲突。推荐锁定具体容器，再用 matches() 判断目标是否匹配选择器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const delegate = (parent, selector, type, handler) => {
parent.addEventListener(type, e => {
const target = e.target;
if (target.matches(selector)) {
handler.call(target, e);
}
});
};
// 用法：给 #list 下所有 .item 按钮委托 click
delegate(document.getElementById('list'), '.item button', 'click', function(e) {
console.log('点了', this.textContent);
});
-
parent必须是真实存在的 DOM 节点，不能传字符串 -
selector支持任意合法 CSS 选择器（如'[data-action="delete"]'） -
handler.call(target, e)让this指向被点击的真实元素，和直接绑定行为一致 - 避免用
parentNode.querySelector()回溯，性能差且易错
动态插入内容后委托失效？检查这三点
不是委托本身坏了，而是监听位置或时机错了。
立即学习“前端免费学习笔记（深入）”；
- 父容器被整个替换（比如
innerHTML = ...）→ 原来的事件监听器丢失，需重新调用delegate() - 委托代码执行太早，
parent还没渲染出来 → 放在DOMContentLoaded后，或用document.querySelector加空值判断 - 目标元素带 Shadow DOM（比如自定义组件），
e.target是 shadowRoot 内部节点，matches()在外部查不到 → 需用e.composedPath()[0]取真正触发点
最常被忽略的是：委托依赖事件冒泡路径的完整性。如果中间某层调用了 e.stopPropagation()，委托就断了——检查你或第三方库有没有在父级 handler 里干这事。
