事件委托实现标签云动态筛选，核心是将click监听绑定在父容器上，通过event.target.matches('.tag')判断点击目标，提取data-tag值筛选；点击激活标签时清除其他active状态，再次点击已激活标签则取消筛选并恢复全部内容；动态新增标签天然支持无需重绑。
事件委托实现标签云动态筛选，核心是利用事件冒泡机制，把点击监听绑定在父容器上，而不是每个标签单独绑定。这样既节省内存，又支持动态增删标签。
用 delegate 模式监听标签点击
给标签云的父元素（比如 <div id="tag-cloud">）绑定一次 click 事件，通过 <code>event.target 判断是否点中了某个标签（如 <span class="tag">前端</span>），再提取其文本或 data 属性作为筛选条件。
- 确保所有标签有统一标识，比如都带
class="tag"或data-tag属性 - 避免监听到父容器自身或非标签区域，可用
if (e.target.matches('.tag'))过滤 - 推荐使用语义化属性，例如
<span data-tag="javascript">JavaScript</span>，比依赖 innerText 更可靠
触发筛选并高亮当前选中项
点击后，先清除之前所有标签的激活状态（比如移除 active 类），再给当前点击的标签加类，并调用筛选函数（如过滤文章列表、更新 URL 参数等）。
- 用
document.querySelectorAll('.tag.active').forEach(el => el.classList.remove('active'))清理旧状态 - 用
e.target.classList.add('active')标记当前选中 - 筛选逻辑可封装为独立函数，接收 tag 值，返回匹配的数据子集，再渲染结果区
支持取消筛选（点击已激活标签）
增强体验：如果用户再次点击同一个已激活标签，应视为取消筛选，恢复全部内容，并移除所有 active 类。
- 判断逻辑：点击时检查
e.target.classList.contains('active') - 若为 true，则清空所有 active 状态，并重置展示内容（如显示全部文章）
- 注意同步更新 UI 和数据状态，避免视觉与实际筛选结果不一致
兼容动态添加的标签
后续通过 JS 新增的标签无需重新绑定事件——因为监听在父级，天然支持冒泡，只要新标签符合选择器规则（如含 .tag），就能响应点击。
- 新增标签时只需插入 HTML 字符串或 DOM 节点，保持结构一致即可
- 例如：
cloudEl.insertAdjacentHTML('beforeend', '<span class="tag" data-tag="nodejs">Node.js</span>') - 无需额外调用 addEventListener，也不用担心重复绑定
