HTML单选按钮组事件委托优化大量选项监听-html教程-PHP中文网

事件委托可将20+单选按钮的监听从o(n)优化为o(1)，避免主线程阻塞与内存泄漏；需用data-id解耦html与js，绑定父容器而非document，防touch/click重复触发，并注意动态添加后监听器丢失及清理时机。

html单选按钮组事件委托优化大量选项监听

为什么直接给每个 radio 绑 click 会卡

页面有 20 个以上 input[type="radio"] 时，逐个调用 addEventListener('click', ...) 会导致主线程阻塞：浏览器要为每个元素创建独立监听器、维护闭包上下文、绑定 DOM 引用。低端安卓机上首次点击延迟可能超 200ms，且内存占用随选项数线性增长。

事件委托把绑定从 O(n) 降到 O(1) —— 只在父容器上绑一次，靠事件冒泡 + e.target 动态识别来源。但前提是父容器稳定、判断逻辑高效。

父容器不能是 document 或 body：冒泡路径太长，e.target.closest() 查找变慢
不能用 innerHTML = '' 或 replaceChildren() 替换父容器，否则监听器丢失
避免在回调里写 while (el && !el.matches(...)) el = el.parentNode，用原生 closest() 更可靠

data-id 是怎么解耦 radio 和表单的

传统方案靠硬编码 id 判断（如 if (el.id === 'newCustomer')），新增选项就得改 JS；而 data-id 把绑定关系声明在 HTML 层，JS 只负责“读取并执行”，彻底解耦。

关键点在于：所有同组 radio 共享 name，每个 radio 带 data-id="formId"，对应表单用 id="formId" —— 这样 JS 就能用 document.getElementById(formId) 精准定位，无需维护映射表。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

data-id 值必须与目标 div 的 id 完全一致（大小写、连字符都不能错）
表单初始状态建议用 hidden 属性而非 style.display: none，更语义化且支持 :not([hidden]) 选择器
不要给 radio 写内联 onclick，它会干扰事件委托的统一处理流

如何写一个兼容 touch/click 的委托监听器

移动端要防 300ms 延迟，桌面端要防重复触发，双绑 touchstart + click 是常见错误。正确做法是优先响应 touchstart 并阻止默认行为，再 fallback 到 click，且必须显式传 { passive: false }。

const wrapper = document.querySelector('.content-wrapper');
wrapper.addEventListener('touchstart', handleRadioClick, { passive: false });
wrapper.addEventListener('click', handleRadioClick);

function handleRadioClick(e) {
  if (e.type === 'touchstart') e.preventDefault();
  const tgt = e.target;
  if (!tgt.matches('input[type="radio"][data-id]')) return;
  
  const targetId = tgt.dataset.id;
  const groupName = tgt.name;
  
  document.querySelectorAll(`[name="${groupName}"]`).forEach(radio => {
    const form = document.getElementById(radio.dataset.id);
    if (form) form.hidden = (radio.dataset.id !== targetId);
  });
}

passive: false 必须显式声明，否则 e.preventDefault() 会报 Unable to preventDefault inside passive event listener
用 tgt.matches('input[type="radio"][data-id]') 精准过滤，比先查 nodeName 再判属性更简洁
不推荐用 event.currentTarget 替代 document.querySelector 查父容器，它只指向监听器绑定的节点，无法跨层级定位