按钮点击无反应需检查事件绑定位置：静态按钮应在DOM加载后绑定，动态按钮应使用事件委托；推荐用data-属性传参、type="button"防误提交，并兼顾可访问性。
按钮点击没反应？检查事件绑定位置
HTML表格里加按钮却点不动，大概率是事件没绑到正确节点上。表格渲染后动态插入的按钮，document.getElementById 或 querySelector 直接找可能找不到——DOM 还没加载完，或者按钮是 JS 后续生成的。
- 静态写死的按钮（HTML 中直接写的），用
DOMContentLoaded确保 DOM 加载完成再绑定 - 动态生成的按钮（比如用
row.insertCell().innerHTML = '<button onclick="handleClick()"></button>'），优先用事件委托，别给每个按钮单独绑addEventListener - 避免在
<button onclick="xxx()"></button>里写内联 JS，容易污染 HTML，也难调试
用事件委托处理表格内所有按钮
表格行数一多，逐个绑事件既慢又容易内存泄漏。用 event.target 判断点击源更稳妥，把监听器挂到 <table> 或 <code><tbody> 上就行。
<pre class="brush:php;toolbar:false;">document.querySelector('table').addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON' && e.target.classList.contains('action-btn')) {
const row = e.target.closest('tr');
const rowIndex = row.rowIndex;
console.log('操作第', rowIndex, '行');
}
});</pre>
<ul>
<li>
<code>e.target.closest('tr') 能准确拿到按钮所在行，比靠 parentNode 链式查找更健壮
classList.contains() 区分按钮类型，比如 <button class="action-btn delete-btn"></button>，避免误触发其他按钮<table>
<h3>按钮传参：别用 <code>data- 属性拼字符串
想让按钮知道它属于哪一行、哪个 ID，很多人用 data-id="123" + dataset.id 读取，这没问题；但千万别写成 onclick="doAction('+id+')" 拼接字符串——XSS 风险高，引号嵌套极易出错。
- 推荐统一用
data-属性存结构化数据：<button data-row-id="42" data-action="edit"></button> - 读取时用
e.target.dataset.rowId（注意驼峰转换），不要手动getAttribute('data-row-id') - 如果要传对象，JSON 序列化后存进
data-payload，再JSON.parse(e.target.dataset.payload)解析
样式和可访问性常被忽略的细节
按钮看着能点，不等于它真“可用”。屏幕阅读器、键盘 Tab 导航、禁用状态反馈，这些一漏，实际体验就断层。
立即学习“前端免费学习笔记（深入）”；
- 必须加
type="button"，否则在<form></form>里默认是submit，点一下整个表单就提交了 - 禁用状态用
disabled属性，别只靠 CSS 的opacity: 0.5—— 那样键盘还能聚焦、屏幕阅读器照样读 - 给按钮加
aria-label，比如<button aria-label="删除第3行数据"></button>，尤其图标按钮没文字时必须有
表格按钮真正麻烦的从来不是加进去，而是后续状态同步、权限控制、loading 反馈、错误回滚——这些得靠数据层驱动，而不是光靠 DOM 绑定撑着。
