如何在JS中从数百个ID不可预知的HTML元素捕获数据？

API 探路者

2026-6-27

解决方案

方案1：批量绑定事件到所有复制按钮

利用querySelectorAll选中所有带.value_copy_button类的按钮，循环为每个按钮绑定点击事件，直接从点击的按钮自身获取data-valuetocopy的值：

// 获取所有复制按钮
const copyButtons = document.querySelectorAll('.value_copy_button');

// 循环绑定点击事件
copyButtons.forEach(button => {
  button.addEventListener('click', copyToClipboard);
});

function copyToClipboard(event) {
  // 从触发事件的按钮上获取目标值
  const valueToCopy = event.target.dataset.valuetocopy;
  if (!valueToCopy) return;

  window.focus();
  navigator.clipboard.writeText(valueToCopy)
    .then(() => {
      // 可选：添加复制成功的提示
      console.log('值已复制到剪贴板');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
}

方案2：事件委托（更推荐，适合大量元素/动态生成场景）

如果页面后续会动态加载更多记录，或者元素数量较多，事件委托更高效——只需给父容器（比如所有.item_bio的共同父元素，甚至document）绑定一次事件，通过事件冒泡判断点击的是否是复制按钮：

// 绑定到document（或者更具体的父容器，比如包裹所有.item_bio的div）
document.addEventListener('click', function(event) {
  // 判断点击目标是否是复制按钮
  if (event.target.matches('.value_copy_button')) {
    const valueToCopy = event.target.dataset.valuetocopy;
    if (!valueToCopy) return;

    window.focus();
    navigator.clipboard.writeText(valueToCopy)
      .then(() => console.log('值已复制'))
      .catch(err => console.error('复制出错:', err));
  }
});