事件委托适用于富文本编辑器工具栏——通过监听容器click事件，用data-command标识按钮行为，结合closest()获取目标、dataset读取指令，统一调用命令处理器；同时需同步按钮状态与光标格式，并支持插件式命令注册。
事件委托在富文本编辑器工具栏中非常适用——因为格式化按钮（如加粗、斜体、列表、标题等）通常结构相似、动态生成，且可能频繁增删，直接为每个按钮绑定事件既冗余又难维护。通过事件委托，只需监听工具栏容器的点击事件，再根据目标元素的特征统一分发处理逻辑。
利用 data 属性标识按钮行为
给每个工具栏按钮添加标准化的 data-command 属性，明确其对应执行的文档命令（如 bold、insertUnorderedList），必要时用 data-value 传递参数（如 formatBlock 需要 "h2"）。
示例 HTML：
在容器上监听 click 并拦截可执行按钮
为工具栏容器绑定一次 click 事件，在回调中判断点击目标是否为带 data-command 的按钮。注意排除非按钮元素（如文字、空格）和禁用状态，并调用 execCommand 或现代替代方案（如 document.execCommand 已废弃，建议配合 getSelection() + DOM 操作或使用 ContentEditable API 封装）。
关键逻辑包括：
- 用
event.target.closest('button[data-command]')安全获取触发按钮（兼容子元素点击） - 读取
dataset.command和dataset.value - 执行前聚焦编辑区域，确保命令作用于正确上下文
- 对不支持原生命令的操作（如自定义样式、插入组件），走扩展分支统一处理
统一处理命令与状态同步
仅响应点击不够——工具栏按钮需实时反映当前光标位置的格式状态（如光标在加粗文本中时，“B”按钮应高亮）。可在事件委托之外，结合 selectionchange 或编辑区域 input 事件，查询当前格式并更新按钮的 aria-pressed 或 CSS 类。
例如：
- 监听
document.addEventListener('selectionchange', updateToolbarState) -
updateToolbarState()中遍历所有 toolbar 按钮，用document.queryCommandState(cmd)（兼容层）或 DOM 分析（如检查父节点是否有<strong></strong>）判断激活态 - 避免重复计算：节流
selectionchange，或只在用户交互后更新
扩展性设计：支持插件式命令注册
将命令逻辑解耦为可注册的处理器对象，便于后续接入自定义功能（如“插入代码块”、“切换暗色背景”）。主委托逻辑不硬编码 switch-case，而是查表调用：
const commandHandlers = {bold: () => document.execCommand('bold'),
insertCodeBlock: () => insertCustomNode('pre', 'code'),
clearFormat: () => clearInlineStyles(getSelectionRange())
};
toolbar.addEventListener('click', e => {
const btn = e.target.closest('button[data-command]');
if (!btn || !btn.dataset.command) return;
const handler = commandHandlers[btn.dataset.command];
if (handler) handler();
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
