数百条条目场景下非侵入式JS实现及动态元素事件绑定问询

一、用data-*属性传递参数（替代内联onclick） #

你已经尝试用data-*属性存储参数，这完全符合非侵入式规范，接下来只需要优化函数逻辑和事件绑定：

1. 完善HTML的data属性 #

把原来onclick里的所有参数都映射到data-*属性（属性名用短横线分隔，JS中会自动转成驼峰命名）：

<button id="button_details_0" class="search_details__button"
  data-image="002124482_2242.jpg"
  data-record="4"
  data-row="0"
  data-locality="Brasil, São Paulo, Atibaia, Inventários e Testamentos, Parte A">
  <span id="search_details_span_0">˅</span>
</button>

2. 修改get_details函数从dataset取参数 #

直接从按钮元素的dataset对象中读取参数，无需手动传参：

function get_details(button) {
  // 从dataset中解构参数（dataset会自动把data-xxx转成xxx的驼峰形式）
  const { image, record, row, locality } = button.dataset;
  
  // 原有业务逻辑直接使用这些变量即可
  console.log('获取详情：', image, record, row, locality);
}

3. 优化初始按钮的事件绑定 #

用forEach替代循环遍历，基于类选择器比ID前缀选择器更可靠：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.search_details__button').forEach(button => {
    button.addEventListener('click', () => get_details(button));
  });
});

二、动态生成按钮的事件处理：事件委托 #

动态生成的按钮无法在页面加载时绑定事件，事件委托是最优解——把事件绑定到一个始终存在的父容器（或document），通过事件冒泡机制捕获点击，判断目标是否是动态按钮：

1. 绑定事件到父容器 #

假设所有动态按钮都在固定存在的容器内（比如.search_details_container），若无明确容器也可使用document：

document.addEventListener('DOMContentLoaded', () => {
  // 绑定到父容器（比绑定到document性能更优）
  const parentContainer = document.querySelector('.search_details_container');
  parentContainer.addEventListener('click', (e) => {
    // 用closest找到最近的目标按钮（兼容点击按钮内部span的情况）
    const ascendButton = e.target.closest('.details_ascend__button');
    if (ascendButton) {
      // 读取动态按钮的data参数
      const { row, role, individual } = ascendButton.dataset;
      // 调用对应的业务函数
      get_more_details(row, role, individual);
    }
  });
});

2. 为什么用closest？ #

用户可能点击按钮内部的<span>元素，closest('.details_ascend__button')会向上查找最近的匹配按钮元素，确保无论点击按钮的哪个部分都能触发正确逻辑。

总结 #

• 用data-*属性存储参数，完全替代内联onclick，符合非侵入式规范；
• 初始元素直接绑定事件，动态元素用事件委托处理，无需每次生成元素后手动绑定；
• 该方案既保持代码分离性，又解决动态元素事件绑定问题，比生成表单的方式更简洁高效。

内容的提问来源于stack exchange，提问作者Marcos Camargo