事件委托不直接实现富文本编辑器工具栏控制，而是通过在工具栏容器上统一监听click事件，根据event.target和data-command属性动态执行对应命令（如"bold"），配合execcommand或现代api完成编辑操作。
事件委托本身不直接实现富文本编辑器的工具栏控制，而是用来高效管理工具栏按钮的点击行为——把监听逻辑从每个按钮上抽出来，统一绑定到工具栏容器上，再根据实际点击的目标动态执行对应命令。
用事件委托监听工具栏按钮点击
富文本编辑器工具栏通常由多个按钮（如 加粗、斜体、插入链接）组成。如果给每个按钮单独绑定 click 事件，DOM 元素多时会增加内存开销且不利于动态增删按钮。改用事件委托更轻量：
- 只在工具栏父元素（如
div.toolbar）上监听一次click - 利用
event.target判断具体是哪个按钮被点击 - 通过按钮的
data-command属性读取对应执行指令（如"bold"、"createLink"）
配合 document.execCommand 或现代 API 执行编辑操作
传统方案常用 document.execCommand（虽已废弃但兼容性好），新项目推荐使用 getSelection() + insertHTML 或 execCommand 的替代方案（如 Document.execCommand 的现代封装或 contenteditable 的原生 API）：
Java Linux版
下载
Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
- 点击「加粗」按钮 → 触发
document.execCommand('bold', false, null) - 点击「插入图片」按钮 → 动态创建
<img>并插入光标位置 - 注意：必须确保编辑区域处于 focus 状态，否则命令可能无效
处理按钮状态同步（如高亮当前格式）
工具栏按钮常需随编辑内容实时更新状态（例如光标所在文字加粗时，「B」按钮应高亮）。事件委托只管“点击响应”，状态同步需额外监听：
- 监听编辑区域的
input、selectionchange和focus事件 - 调用
document.queryCommandState('bold')等方法判断当前格式 - 根据返回值动态切换按钮的
aria-pressed或 CSS class
支持快捷键与工具栏联动
用户既可点按钮，也可按 Ctrl+B 加粗。为保持一致性，建议将命令逻辑提取为独立函数：
- 定义统一的
executeCommand(cmd, value = null)函数 - 事件委托中调用它，键盘事件中也调用它
- 避免重复代码，便于后续迁移到
Clipboard API或自定义格式系统
不复杂但容易忽略细节：确保工具栏容器有明确的 id 或 class，按钮带语义化 data- 属性，且所有命令执行前校验编辑区域是否可编辑。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
