解决表格行点击高亮延迟生效问题：从内联事件到委托事件的重构实践

原始代码中，highlight_row() 函数被定义在 SetTourLocationRecordId() 内部，并在每次点击后动态为所有

function highlight_row() {
  var table = document.getElementById("display-table");
  var rows = table.getElementsByTagName("tr");
  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener("click", function () { /* ... */ });
  }
}

该写法存在三大缺陷：

• ❌ 重复绑定：每次调用 highlight_row() 都会为同一行重复添加监听器，造成内存泄漏与行为不可预测；
• ❌ 时机错位：onclick="SetTourLocationRecordId(...)" 是在表格 HTML 字符串拼接时写死的，而此时 尚未插入 DOM，document.getElementById("display-table") 返回 null，内部 highlight_row() 实际从未执行；
  ❌ 内联样式耦合：直接操作 element.style.backgroundColor 易被 CSS 优先级覆盖，且难以统一维护。

  这也是为何将 onclick 移至 内可“偶然”生效——因为 是静态 HTML 的一部分，其事件属性在解析阶段即被绑定，但代价是交互区域受限，违背表格整行可点击的设计预期。

  ✅ 正确解法：事件委托 + 动态监听管理

  核心思路是：不在 HTML 拼接时硬编码事件，也不在回调中反复绑定监听器，而是利用事件委托，在表格容器上监听一次，由事件冒泡精准捕获目标行。

  

  寻光

  阿里达摩院寻光视频创作平台，以视觉AIGC为核心功能，用PPT制作的方式创作视频

  下载

  ✅ 步骤一：使用 dataset 存储结构化数据

  避免长参数链，将目的地对象序列化为 JSON 存入 data-json 属性：

  <tr data-json='{"Display_Name":"Hilton Parsippany","City":"Parsippany",...}'>
    <td><span>Hilton Parsippany</span></td>
    <td>Parsippany</td>
    <!-- 其他列 -->
  </tr>

  ✅ 步骤二：定义清晰分离的事件处理器

  // 高亮指定行（移除旧高亮，添加新高亮）
  const highlight_row = (e) => {
    const table = e.target.closest('table');
    table.querySelectorAll('tr').forEach(tr => tr.classList.remove('row_highlight'));
    e.target.closest('tr').classList.add('row_highlight');
  };
  
  // 处理点击：兼容 td/span 点击，提取数据并高亮
  const tableClickHandler = (e) => {
    if (e.target !== e.currentTarget && e.target.closest('td')) {
      const row = e.target.closest('tr');
      const data = JSON.parse(row.dataset.json || '{}');
      console.log('Selected:', data); // 替代原 alert 和冗余 log
      highlight_row(e);
    }
  };

  ✅ 步骤三：动态管理监听器生命周期

  关键点：仅在表格渲染完成后，一次性绑定事件委托；并在重新渲染前解绑，防止重复绑定：

  function calculateDistance() {
    const div = document.getElementById('result');
  
    // ✅ 清理旧监听器（避免多次渲染导致多重绑定）
    div.removeEventListener('click', tableClickHandler);
  
    // ... 执行 Geocoding & DistanceMatrixService ...
  
    if (status === google.maps.DistanceMatrixStatus.OK) {
      const html = generateTableHTML(destinationAddresses); // 封装 HTML 拼接逻辑
      div.innerHTML = html;
  
      // ✅ 表格插入 DOM 后，立即绑定委托监听器
      div.addEventListener('click', tableClickHandler);
    }
  }

  ✅ 步骤四：CSS 类驱动样式（推荐）

  .row_highlight {
    background-color: #1e90ff !important;
    color: snow !important;
  }

  ⚠️ 注意：添加 !important 可确保覆盖

  默认样式或内联 style，但更佳实践是通过 CSS 优先级设计（如 #result table tr.row_highlight）避免滥用。

  ? 完整可运行示例（精简版）

  <style>
    .row_highlight { background:#1e90ff; color:snow; }
    table { border-collapse:collapse; width:100%; }
    th,td { border:1px solid #ddd; padding:8px; }
  </style>
  
  <div id="result"></div>
  <button onclick="calculateDistance()">Calculate Distance</button>
  
  <script>
    const destinationAddresses = { /* ...同原数据 */ };
  
    const highlight_row = e => {
      const table = e.target.closest('table');
      table?.querySelectorAll('tr').forEach(tr => tr.classList.remove('row_highlight'));
      e.target.closest('tr')?.classList.add('row_highlight');
    };
  
    const tableClickHandler = e => {
      if (e.target.closest('td')) highlight_row(e);
    };
  
    function calculateDistance() {
      const div = document.getElementById('result');
      div.removeEventListener('click', tableClickHandler); // 清理
  
      // 模拟异步结果（此处省略 Google Maps 调用）
      setTimeout(() => {
        let html = '<table><tr><th>Name</th><th>City</th></tr>';
        Object.values(destinationAddresses).forEach(dest => {
          const json = JSON.stringify(dest);
          html += `<tr data-json='${json}'><td>${dest.Display_Name}</td><td>${dest.City}</td></tr>`;
        });
        html += '</table>';
        div.innerHTML = html;
        div.addEventListener('click', tableClickHandler); // 绑定
      }, 300);
    }
  </script>

  ✅ 总结：最佳实践清单

  项目	推荐做法	原因
  事件绑定	使用事件委托（div.addEventListener('click', handler)）	避免动态内容重复绑定，提升性能与可维护性
  数据传递	用 data-* 属性 + JSON.stringify()	替代长参数列表，语义清晰，防 XSS（需转义）
  样式控制	element.classList.add/remove() + CSS 类	解耦 JS 与样式，支持主题切换，避免 !important 冲突
  生命周期	渲染前 removeEventListener，渲染后 addEventListener	杜绝监听器堆积，保障行为确定性
  调试技巧	在 handler 开头加 console.log(e.target)	快速验证事件源是否符合预期（如是否点中 td 而非空白）

  遵循以上模式，不仅能彻底解决“首点击无效”问题，更能构建出可扩展、易测试、符合现代 Web 标准的交互组件。