本文介绍如何通过事件委托机制，用单一事件监听器控制多个表单的显隐切换，避免为每个按钮重复绑定事件，提升代码可维护性与性能。

在构建具有多个功能入口（如“新建分类”“新建博客”等）的管理界面时，常需为每个操作按钮关联一个独立表单，并实现点击即显示/隐藏对应表单的效果。若为每个按钮单独添加 click 事件监听器，不仅代码冗余，还难以统一管理状态（如高亮当前激活按钮、确保仅一个表单可见）。更优雅的解法是采用 事件委托（Event Delegation） —— 将监听器绑定在父容器上，利用事件冒泡机制捕获子元素触发的事件，并通过语义化数据属性精准匹配目标表单。

✅ 推荐实现方案：基于 data-id 的事件委托

核心思路是：

ImageMagick 批处理处理器

使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。

下载

• 所有按钮统一放在 .buttons 容器中，每个 添加 data-id 属性（如 data-id="cat"）；
• 所有表单统一放在 .forms 容器中，每个表单（如
  ）也设置相同的 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 元素的推荐模式。