本文介绍如何通过事件委托机制，用单一事件监听器控制多个表单的显隐切换，避免为每个按钮重复绑定事件，提升代码可维护性与性能。
在构建具有多个功能入口（如“新建分类”“新建博客”等）的管理界面时，常需为每个操作按钮关联一个独立表单，并实现点击即显示/隐藏对应表单的效果。若为每个按钮单独添加 click 事件监听器，不仅代码冗余，还难以统一管理状态（如高亮当前激活按钮、确保仅一个表单可见）。更优雅的解法是采用 事件委托（Event Delegation） —— 将监听器绑定在父容器上，利用事件冒泡机制捕获子元素触发的事件，并通过语义化数据属性精准匹配目标表单。
✅ 推荐实现方案：基于 data-id 的事件委托
核心思路是：
- 所有按钮统一放在 .buttons 容器中，每个 <button> 添加 data-id 属性（如 data-id="cat"）；
- 所有表单统一放在 .forms 容器中，每个表单（如 <div class="form">）也设置相同的 data-id 值；
- 使用 CSS 类 .show 控制显隐（配合 display: block / none），而非直接操作 style.display，便于样式复用与过渡动画扩展。
? HTML 结构（语义清晰、易于维护）
<div class="buttons">
<button type="button" data-id="cat">New Category</button>
<button type="button" data-id="blog">New Blog</button>
<button type="button" data-id="video">New Video</button>
<button type="button" data-id="prod">New Product</button>
</div>
<section class="forms">
<div class="form" data-id="cat">
Hide or show this div for the categories
<div class="panel">
<div class="panel__head">Panel Head</div>
<div class="panel__body">Panel Body</div>
<div class="panel__footer">Panel Footer</div>
</div>
</div>
<div class="form" data-id="blog">
Hide or show this div for the blogs
<div class="panel">
<div class="panel__head">Panel Head</div>
<div class="panel__body">Panel Body</div>
<div class="panel__footer">Panel Footer</div>
</div>
</div>
<div class="form" data-id="video">
Hide or show this div for the videos
<div class="panel">
<div class="panel__head">Panel Head</div>
<div class="panel__body">Panel Body</div>
<div class="panel__footer">Panel Footer</div>
</div>
</div>
<div class="form" data-id="prod">
Hide or show this div for the products
<div class="panel">
<div class="panel__head">Panel Head</div>
<div class="panel__body">Panel Body</div>
<div class="panel__footer">Panel Footer</div>
</div>
</div>
</section>⚙️ JavaScript 逻辑（简洁、健壮、可扩展）
// 缓存容器节点
const forms = document.querySelector('.forms');
const buttons = document.querySelector('.buttons');
// 统一事件处理器
buttons.addEventListener('click', handleButton);
// 工具函数：批量移除指定类名
function removeClasses(context, selector, className) {
context.querySelectorAll(selector).forEach(el => el.classList.remove(className));
}
function handleButton(e) {
// 确保点击的是 button 元素
if (!e.target.matches('button')) return;
const { id } = e.target.dataset; // 提取 data-id 值（如 "cat"）
const form = forms.querySelector(`.form[data-id="${id}"]`);
if (!form) return; // 安全防护：防止 data-id 不匹配
if (e.target.classList.contains('active')) {
// 若已激活，点击即收起：移除按钮 active 类 + 表单 show 类
e.target.classList.remove('active');
form.classList.remove('show');
} else {
// 否则先清空所有状态，再激活当前项
removeClasses(buttons, 'button', 'active');
removeClasses(forms, '.form', 'show');
e.target.classList.add('active');
form.classList.add('show');
}
}? CSS 样式（专注表现，解耦逻辑）
.forms { margin-top: 1em; }
.form { display: none; border: 1px solid #ddd; padding: 0.5em; margin-top: 0.5em; }
.show { display: block; }
button {
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 0.4em 0.8em;
margin-right: 0.5em;
cursor: pointer;
border-radius: 4px;
}
button:hover:not(.active) { background-color: #f5f5f0; }
button.active { background-color: #ffeb3b; font-weight: bold; }⚠️ 注意事项与最佳实践
- 避免 ID 冗余：原方案依赖 id="catBtn" 和 id="catForm" 等硬编码匹配，易出错且难维护；改用 data-id 更灵活，支持任意命名规则（如 data-id="user-profile"）。
- 事件委托优势：新增按钮/表单无需修改 JS，只需保持 data-id 一致即可自动生效。
- 健壮性保障：添加 if (!form) return 防止因 DOM 不匹配导致脚本中断；使用 e.target.matches('button') 替代 e.target.id === ...，避免误判父元素。
- 可访问性提示：建议为按钮添加 type="button"（防止意外提交表单），并考虑配合 aria-expanded 和 aria-controls 属性提升屏幕阅读器支持。
此方案兼顾简洁性、可维护性与可扩展性，是现代 Web 应用中管理多组关联 UI 元素的推荐模式。
