最常用且推荐的方式是用 addEventListener 动态绑定点击事件，HTML 保持语义化结构，JS 中通过 getElementById 获取元素后调用 addEventListener('click', handler)，支持多次绑定、传参（用 data-* 属性或闭包）、不覆盖已有监听器。

怎么用 addEventListener 绑定按钮点击事件

最常用也最推荐的方式，不是写 onclick 属性，而是用 JS 动态绑定。直接在 HTML 里写 onclick="handleClick()" 看似简单，但会污染结构、难以维护，且无法传参或复用逻辑。

实操建议：

• HTML 中只保留语义化结构，比如 提交
• 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 放在