最常用且推荐的方式是用 addEventListener 动态绑定点击事件，HTML 保持语义化结构，JS 中通过 getElementById 获取元素后调用 addEventListener('click', handler)，支持多次绑定、传参（用 data-* 属性或闭包）、不覆盖已有监听器。
怎么用 addEventListener 绑定按钮点击事件
最常用也最推荐的方式，不是写 onclick 属性，而是用 JS 动态绑定。直接在 HTML 里写 onclick="handleClick()" 看似简单，但会污染结构、难以维护，且无法传参或复用逻辑。
实操建议：
- HTML 中只保留语义化结构，比如
<button id="submitBtn">提交</button> - JS 中用
document.getElementById('submitBtn').addEventListener('click', function() { ... }) - 注意事件监听器可以多次调用，不会覆盖；而
onclick赋值会覆盖前一个 - 如果要传参，别用
onclick="handleClick(123)"，改用闭包或data-*属性 +event.target.dataset.id
怎样读写表单元素的值（input、select、textarea）
HTML5 表单控件和 JS 的交互核心是 value 属性，但不同控件行为有差异，容易踩坑。
常见错误现象：修改了 input.value = 'new'，页面没变 —— 实际上变了，只是你没触发重绘或没等 DOM 加载完。
立即学习“前端免费学习笔记（深入）”；
使用场景与要点：
-
input[type="text"]、textarea：直接读写.value -
input[type="checkbox"]或radio：用.checked判断/设置是否选中，不是.value -
select下拉框：读取选中项用selectElement.value（返回value属性值），或用selectElement.options[selectElement.selectedIndex].text获取显示文字 - 获取实时输入内容？别只靠
click，用input事件（比change更及时，支持中文输入法上屏后触发）
如何用 dataset 在 HTML 和 JS 之间传递自定义数据
HTML5 原生支持 data-* 属性，JS 通过 element.dataset 访问，比用 getAttribute 更安全、更语义化。
参数差异和易错点：
- HTML 写
data-user-id="1001"，JS 中读作element.dataset.userId（自动转驼峰，短横线后首字母大写） -
dataset只读字符串，数字需手动parseInt或Number() - 不要用
data-存大量 JSON 字符串，解析成本高且难调试；适合存 ID、状态标记、小配置项 - 动态设置时，用
element.dataset.foo = 'bar'即可，会自动同步到 DOM 属性
为什么 DOMContentLoaded 比 window.onload 更适合初始化交互逻辑
很多 JS 代码一放就报 Cannot read property 'addEventListener' of null，根本原因是 DOM 还没加载完，就去查元素。
性能与兼容性影响：
-
DOMContentLoaded在 HTML 解析完成、DOM 树构建好后触发，不等图片、样式表等资源，适合绝大多数交互初始化 -
window.onload要等所有资源（含图片、CSS、iframe）加载完才触发，延迟明显，用户已能操作界面但 JS 还没启动 - 现代写法：直接把 JS 放在
