JavaScript 中怎么在文件树组件中用事件委托处理文件夹展开-js教程-PHP中文网

文件树组件用事件委托实现文件夹展开，即监听父容器click事件，通过e.target.closest()识别点击的文件夹节点，再根据data-expanded状态切换.children显隐。

javascript 中怎么在文件树组件中用事件委托处理文件夹展开

在文件树组件中用事件委托处理文件夹展开，核心是把点击事件监听绑定到父容器（如 <ul class="file-tree"></ul>），而不是每个文件夹节点，再通过事件对象的 target 判断是否点中了可展开的折叠图标或文件夹名，进而切换其子节点的显隐状态。

1. 结构设计要支持委托

确保 HTML 结构有清晰的层级和可识别的触发目标。例如：

▶ src
- index.js

关键点：

data-type="folder" 标识可展开节点
.toggle-icon 是用户实际点击的目标（也可点击 .name）
data-expanded 控制状态，避免依赖 DOM 显示状态
.children 是待切换显示/隐藏的子列表

2. 绑定委托事件并判断目标

在父容器上监听 click，用 closest() 向上查找最近的可展开文件夹项：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

document.querySelector('.file-tree').addEventListener('click', (e) => {
  const folderItem = e.target.closest('li[data-type="folder"]');
  if (!folderItem) return;

  const isToggle = e.target.matches('.toggle-icon') || e.target.matches('.name');
  if (!isToggle) return;

  const isExpanded = folderItem.dataset.expanded === 'true';
  const children = folderItem.querySelector('.children');

  if (children) {
    children.style.display = isExpanded ? 'none' : 'block';
  }
  folderItem.dataset.expanded = String(!isExpanded);
});

说明：